Angular 6: материал-навигационный компонент - ошибки синтаксического анализа шаблона: неожиданный токен '?'в столбце 20 в [isHandset $ |асинхронный?'диалог': 'навигация'] - PullRequest
Новая
       12

Angular 6: материал-навигационный компонент - ошибки синтаксического анализа шаблона: неожиданный токен '?'в столбце 20 в [isHandset $ |асинхронный?'диалог': 'навигация']

0 голосов
/ 25 мая 2018

Здесь я пробую свой самый первый угловой проект, для которого я хочу использовать дизайн материала для своего проекта.Я успешно создал проект, взяв ссылку из [material.angular.io] [1] и добавив material:nav компонент для моей навигации, который создает файлы компонентов навигации, а в файле .ts у меня есть что-то вроде этого: 

 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 

  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);

Который решает ошибку компиляции, но яПолучение Ошибка разбора шаблона .Я получаю эту ошибку в консоли браузера 

 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 содержит 

 <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 или что-то еще.

Ответы [ 2 ]

0 голосов
/ 25 мая 2018
  1. Просто измените тип наблюдаемого на логический в вашем файле машинописи.
  2. Соответствие скобкам в html-файле вашего компонента
    • [attr.role] = "(isHandset $ | async)? 'Dialog': 'navigation'"
    • [mode]= "(isHandset $ | async)? 'over': 'side'"

здесь исправление в зеленых линиях enter image description here

Вот основная ссылка исправления - https://github.com/angular/material2/pull/11448/commits/20306dbeed3fe7232ffb85ba1d9fd406f6885db2

0 голосов
/ 25 мая 2018

Вложите ваши наблюдаемые в (): 

[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"
...