Angular 6:material-nav组件-模板解析错误:意外的标记'?'在[isHandset $ |异步? 'dialog':'navigation'] [英] Angular 6: material-nav component - Template parse errors: Unexpected token '?' at column 20 in [isHandset$ | async ? 'dialog' : 'navigation']

问题描述

在这里，我正在尝试我的第一个Angle 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$

 isHandset$: Observable<BreakpointState> = this.breakpointObserver.observe(Breakpoints.Handset);

哪一个解决了编译错误，但我遇到了 Template parse error (模板解析错误).我在浏览器控制台中收到此错误

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 $ |异步? 'dialog':'navigation']的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！