角管不会更新模板

Question

我正在 Angular 中创建一个应用程序，并且使用纯管道“异步”来订阅模板内的 Observable，如下所示：

<nav *ngIf="device.isDesktop$ | async as desktop" class="sidenav__wrapper">
  {{ desktop }}
  <div *ngFor="let item of menuItems" class="sidenav__item">
    <div class="sidenav__icon">
      <i [ngClass]="['gg-' + item.icon]"><span></span></i>
    </div>
    <span class="sidenav__item-name">{{ item.name }}</span>
  </div>
</nav>

但是，桌面值根本没有更新，即使当我在 console.log 中显示值时，如下所示：

  get isDesktop$(): Observable<boolean> {
    return this._deviceType$.asObservable().pipe(
      map((type) => type === Device.Desktop),
      tap(console.log)
    );
  }

Answer 1

你的组件.ts

import {BreakpointObserver, Breakpoints, BreakpointState} from '@angular/cdk/layout';
export class YourComponent {
  public isHandset$: Observable<boolean> = this.breakpointObserver
    .observe(Breakpoints.Handset)
    .pipe(map((result: BreakpointState) => {
      return result.matches;
    }));
  constructor (private breakpointObserver: BreakpointObserver){
}

}

你的组件.html

<whateverTag *ngIf="(isHandset$ | async)"></whateverTag>