Html 角度材质：使用mat sidenav，无法读取属性'；切换'；未定义的

我有一个Angular 8项目，使用Angular Material 8，无法通过同一组件中的按钮切换sidenav。javascript控制台说

无法读取未定义的属性“toggle”

但是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$

break（发生）下面时，按钮才会出现，然后它应该在内容的顶部打开（没有发生）。由于

#sidenav

引用变量位于

mat sidenav

标记中，因此我似乎已将其正确设置。

您共享的错误必须具有相关性或缺少某些内容；要查看工作行为，我们必须解决代码中的2

*ngIf

条件：

• isAuthenticated（）

  ——这可能是错误的，我们不知道您使用的逻辑

• （isHandset$| async）

  ——我们不知道可观察逻辑

假设这2个

*ngIf

条件为真，代码工作正常。。。未定义的“无法读取属性”切换没有错误

相关ts：

import {Component} from '@angular/core';

@Component({
  selector: 'sidenav-open-close-example',
  templateUrl: 'sidenav-open-close-example.html',
  styleUrls: ['sidenav-open-close-example.css'],
})
export class SidenavOpenCloseExample {
  events: string[] = [];
  opened: boolean;
  isHandset$:boolean =true;
  isAuthenticated(){ return true;}

  shouldRun = [/(^|\.)plnkr\.co$/, /(^|\.)stackblitz\.io$/].some(h => h.test(window.location.host));
}

---

你可以检查一下

你能在堆栈闪电战中抛出这个吗？当你尝试调用

sidenav.toggle（）

时，你的

isAuthenticated（）

正确吗？@Jojofoulk是的。该方法在本地存储中查找令牌并检查过期日期。如果未过期，则isAuthenticated（）=true。我已经在Chrome调试器中检查过了。我会在Stackblitz上公布的。除了stackblitz上没有显示的图标外，该示例也可以使用。：/谢谢你的回复。在stackblitz中，单击按钮似乎只对我有效一次，但不是第二次，我得到了相同的错误。我还在修补它。