ここでは、プロジェクトにマテリアルデザインを使用したい最初のアンギュラー6プロジェクトを試しています。 [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 件
オブザーバブルのタイプを変更するだけですブール値 あなたのタイプスクリプトで ファイル。
コンポーネントhtmlファイル内の括弧を一致させる
[attr.role] = "(isHandset $| async)? 'dialog': 'navigation'"
[mode] = "(isHandset $| async)? 'over': 'side'"
ここにグリーンラインの修正があります
fix-https://github.com/angular/material2/pull/11448/commits/20306dbeed3fe7232ffb85ba1d9fd406f6885db2のメインリンクを次に示します。
関連記事
- ボタンを無効にするために使用される角度テンプレート変数はコンパイルエラーをスローします
- Angular:子コンポーネントから親コンポーネントにデータを送信する方法は?
- Angularテンプレートのリンクを使用したページングのセットアップ
- Angularコンポーネント内にHTMLコンテンツを含めることは可能ですか?
- ブレードテンプレートlaravelで単一ファイルvueコンポーネントを使用する方法は?
- Angular 6:コンポーネントからサービスにオブジェクトを渡す
- 複数のクラスを持つAngular 4コンポーネント
- コンポーネント内のテンプレート変数にアクセスする
- 角度単体テストで子コンポーネントでメソッドを実行する方法
- 親コンポーネントがAngularルーターに隠れない
関連した質問
- Angular 5で値を手動で設定した後、リアクティブフォームを検証しますか?
- マット選択角度の配列から1つのオブジェクトのみを表示
- mat-selectの選択された値に従ってmat-tableをソートします
- IISでのAngularURLの問題
- マテリアルカードのアクションボタンは、カードコンテンツの境界を超えて左右に伸びています
- 値のタイムスタンプでAngularMaterialテーブルフィールドをフィルタリングする方法は?
- 各ステップに個別のコンポーネントを備えたAngularMaterial Stepper:ExpressionChangedAfterItHasBeenCheckedError
- タイプスクリプトファイルからマットチェックボックスを非表示にする方法
- Angular-マテリアルテーブルの並べ替えが適切に機能しない
- 動的に追加されたフォームフィールドの重複を検証する方法
Obyzablesを
()
で囲む :