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

Posted

技术标签:

【中文标题】Angular Material:使用 mat-sidenav,无法读取未定义的属性“切换”【英文标题】:Angular Material: using mat-sidenav, cannot read property 'toggle' of undefined 【发布时间】:2019-10-31 14:06:40 【问题描述】:

我有一个使用 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 标记中,看来我已经正确设置了它。

【问题讨论】:

你能把这个扔进堆栈闪电战吗? 当您尝试拨打 sidenav.toggle() 时,您的 isAuthenticated() 是否为真? @Jojofoulk 是的。该方法在本地存储中查找令牌并检查到期日期。如果它没有过期,那么 isAuthenticated() = true。我已经在 Chrome 调试器中检查过了。我会在 Stackblitz 上发布它。 呃。除了未在 stackblitz 上显示的图标外,该示例还有效。 :-/ stackblitz.com/edit/angular-vppsa3 【参考方案1】:

您共享的错误必须有依赖关系或缺少某些东西;要查看工作行为,我们必须解决代码中的 2 个*ngIf 条件:

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

假设这 2 个 *ngIf 条件为真,代码工作正常...没有错误“无法读取未定义的属性 'toggle'”

相关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));

您可以查看working stackblitz here

【讨论】:

感谢您的回复。似乎在stackblitz中单击该按钮对我来说只工作一次,但不是第二次,我得到了同样的错误。我还在修改它。

以上是关于Angular Material:使用 mat-sidenav,无法读取未定义的属性“切换”的主要内容,如果未能解决你的问题,请参考以下文章

使用 Angular-cli 在 Angular 2 应用程序中安装 bootstrap-material-design

无法导入“@angular/material”模块

如何使用 Angular Material 构建 Ivy?

@angular/material 自动完成的性能问题

使用 Material 图标字体并将 Angular 组件的封装设置为原生

如何使用 Angular-Material 获得全高侧导航