Angular 角度4“；无法读取属性'；切换'；“未定义”的定义；使用*ngIf="；sidemenuu==true"；侧边菜单

angular 4“在使用*ngIf=“sidemenuu==true”到侧菜单时无法读取未定义的属性“toggle”

side-menu.html

<button mat-icon-button (click)="snav.toggle()" value="sidebarclosed">
<mat-icon>menu</mat-icon>
</button>
<span fxFlex></span>
<app-header></app-header>
 </mat-toolbar>
 <mat-sidenav-container class="example-sidenav-container" 
[style.marginTop.px]="mobileQuery.matches ? 0 : 0">
    <mat-sidenav #snav id="snav" class="dark-sidebar pl-xs" 
[mode]="mobileQuery.matches ? 'side' : 'over'" fixedTopGap="0" 
[opened]="mobileQuery.matches" [disableClose]="mobileQuery.matches" 
*ngIf="sidemenuu == true" >
        <app-sidebar  ></app-sidebar>
    </mat-sidenav>
    <mat-sidenav-content class="page-wrapper">
        <div class="page-content">
            <router-outlet>
                <app-spinner></app-spinner>
            </router-outlet>
        </div>
    </mat-sidenav-content>

 </mat-sidenav-container>

这是我为其他路径得到的错误

错误

SideMenuComponent.html:40错误类型错误：无法读取的属性“toggle” 未定义

at Object.eval [as handleEvent] (SideMenuComponent.html:40)
at handleEvent (core.js:13589)
at callWithDebugContext (core.js:15098)
at Object.debugHandleEvent [as handleEvent] (core.js:14685)
at dispatchEvent (core.js:10004)
at eval (core.js:10629)
at HTMLButtonElement.eval (platform-browser.js:2628)
at ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:4751)
at ZoneDelegate.invokeTask (zone.js:420)

由于按钮位于mat sidenav容器的“外部”，因此可以使用ViewChild

//In component.ts
@ViewChild('sidenav') sidenav:any;
toggleSidenav()
  {
    this.sidenav.toggle();
    console.log(this.sidenav.toggle);
  }

//In your .html
<button mat-icon-button (click)="toggleSidenav()" value="sidebarclosed">

//在component.ts中
@ViewChild（“侧导航”）侧导航：任何；
toggleSidenav（）
{
this.sidenav.toggle（）；
log（this.sidenav.toggle）；
}
//在你的.html文件中

对于那些将跟进此问题的人，添加到您的组件中。ts将解决此错误

---

@ViewChild（“侧导航”）侧导航：任何

这可能是Viewchild的问题。。。有时viewchild需要两个参数。。 在这种情况下，您可以使用此

 @ViewChild('blabla', {static: false})

---

这是因为

snav

未定义，你在哪里初始化它？你救了我一天！

 @ViewChild('blabla', {static: false})