时间戳

首页 > 解决方案 > Angular Material：使用 mat-sidenav，无法读取未定义的属性“切换”

html - Angular Material：使用 mat-sidenav，无法读取未定义的属性“切换”

问题描述

我有一个使用 Angular Material 8 的 Angular 8 项目，它无法通过同一组件中的按钮切换 sidenav。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标签中，我似乎已经正确设置了它。

标签： htmlcssangularangular-materialangular8

解决方案

您共享的错误必须具有依赖关系或缺少某些内容；要查看工作行为，我们必须解决*ngIf代码中的两个条件：

  • isAuthenticated()-- 这可能是假的，我们不知道你使用的逻辑
  • (isHandset$ | async)-- 我们不知道可观察的逻辑

假设这两个*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));
}

你可以在这里查看工作中的 stackblitz

推荐阅读