html - Angular Material: mat-sidenav を使用すると、未定義のプロパティ 'toggle' を読み取ることができません

Question

同じコンポーネントのボタンを介して sidenav を切り替えることができない Angular Material 8 を使用した Angular 8 プロジェクトがあります。JavaScriptコンソールはそれを言います

未定義のプロパティ「トグル」を読み取ることができません

ただし、sidenav にはテンプレートに参照変数があります。

ボタンがテンプレートにあることを確認したので、イベント エミッターやその他の策略について心配する必要はありません。これは簡単です。

HTML

<mat-toolbar color="primary">
  <button mat-icon-button (click)="sidenav.toggle()" *ngIf="(isHandset$ | async)"><mat-icon>menu</mat-icon></button>
  <span>This Be Me App, Matey</span>
</mat-toolbar>
<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #sidenav class="sidenav" fixedInViewport="true" *ngIf="isAuthenticated()"
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'over' : 'side'"
      [opened]="(isHandset$ | async) ? 'false' : 'true'">
    <mat-toolbar><mat-icon (click)="sidenav.toggle()" *ngIf="(isHandset$ | async)">arrow_back</mat-icon> Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item [routerLink]="['/home']" routerLinkActive="active">Home</a>
      <a mat-list-item (click)="logout()">Logout</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content class="content">    
    <!-- Add Content Here -->
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

メニュー ボタンはブレークポイントで期待どおりに表示されたり消えたりしますが、クリックするとエラーが発生します。

何が起こるかというと、ボタンはブレークの下にあるときにのみ表示されisHandset$(発生します)、コンテンツの上で開く必要があります (発生しません)。#sidenav参照変数はタグにあるので、mat-sidenav適切に設定されているようです。