Angular 6:material-nav 组件 - 模板解析错误:意外标记“?"在 [isHandset$ | 中的第 20 列异步?'对话框':'导航'] [英] Angular 6: material-nav component - Template parse errors: Unexpected token '?' at column 20 in [isHandset$ | async ? 'dialog' : 'navigation']
问题描述
在这里,我正在尝试我的第一个 angular 6 项目,我想在我的项目中使用材料设计.我通过参考 [material.angular.io][1] 成功创建了项目,并为我的导航添加了 material:nav
组件,它创建了导航组件文件,在 .ts 文件中我有类似的东西这个:
Here I am trying my very first angular 6 project for which I want to use material design for my project. I have created project successfully by taking reference from [material.angular.io][1] and added material:nav
component for my nevigation which creates the navigation component files and in .ts file I have something like this:
import { Component } from '@angular/core';
import { BreakpointObserver, Breakpoints, BreakpointState } from '@angular/cdk/layout';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Component({
selector: 'my-nav',
templateUrl: './my-nav.component.html',
styleUrls: ['./my-nav.component.css']
})
export class mynavComponent {
isHandset$: Observable<BreakpointState> = this.breakpointObserver.observe(Breakpoints.Handset).pipe(map(result => result.matches));
constructor(private breakpointObserver: BreakpointObserver) {}
}
从 CLI 编译代码时显示这样的错误
Which shows error like this while compiling the code from CLI
Type 'Observable<boolean>' is not assignable to type 'Observable<BreakpointState>'. Type 'boolean' is not assignable to type 'BreakpointState'.
我已经像这样更改了 isHandSet$
I have changed the isHandSet$
like this
isHandset$: Observable<BreakpointState> = this.breakpointObserver.observe(Breakpoints.Handset);
这解决了编译错误,但我收到了模板解析错误.我在浏览器控制台中收到此错误
Which solves the compilation error but I am getting the Template parse error. I am getting this error in browser console
Uncaught Error: Template parse errors:
Parser Error: Unexpected token '?' at column 20 in [isHandset$ | async ? 'dialog' : 'navigation'] in ng:///AppModule/mynavComponent.html@4:2 ("
class="sidenav"
fixedInViewport="true"
[ERROR ->][attr.role]="isHandset$ | async ? 'dialog' : 'navigation'"
[mode]="isHandset$ | async ? 'over' : 's"):
ng:///AppModule/mynavComponent.html@4:2
我的 mynav.html 包含
My mynav.html contains
<mat-sidenav-container class="sidenav-container">
<mat-sidenav #drawer
class="sidenav"
fixedInViewport="true"
[attr.role]="isHandset$ | async ? 'dialog' : 'navigation'"
[mode]="isHandset$ | async ? 'over' : 'side'"
[opened]="!(isHandset$ | async)">
<mat-toolbar color="primary">Menu</mat-toolbar>
<mat-nav-list>
<a mat-list-item href="#">Link 1</a>
<a mat-list-item href="#">Link 2</a>
<a mat-list-item href="#">Link 3</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar color="primary">
<button
type="button"
aria-label="Toggle sidenav"
mat-icon-button
(click)="drawer.toggle()"
*ngIf="isHandset$ | async">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
<span>Application Title</span>
</mat-toolbar>
</mat-sidenav-content>
现在的问题是我如何解决这个问题.这是我浏览器的问题吗?我正在使用 Google chrome 版本 66.0.3359.181 或其他版本.
Now the thing is how do I solve this issue. Is this is the issue of my browser? I am using Google chrome Version 66.0.3359.181 or something else.
推荐答案
在 ()
中包含你的 Observables:
Enclose your Observables in ()
:
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"
这篇关于Angular 6:material-nav 组件 - 模板解析错误:意外标记“?"在 [isHandset$ | 中的第 20 列异步?'对话框':'导航']的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!