属性 'isSideBarOpen' 在类型 'AppComponent' 上不存在

Question

下面是我的html组件

<div>
   <mat-sidenav-container class="main-container">
     <mat-sidenav #sideBarRef opened mode="side" [(opened)]='isSideBarOpen'>
       <mat-nav-list>
         <a mat-list-item href="#"> Home </a>        
         <a mat-list-item href="#"> Updates </a>        
       </mat-nav-list>
     </mat-sidenav>
     <mat-sidenav-content>
       <mat-toolbar color="primary"><button (click)='sideBarRef.toggle()'><mat-icon>menu</mat-icon></button>My Application</mat-toolbar>
     </mat-sidenav-content>
   </mat-sidenav-container>
</div>

这是我的 app.module.ts 文件

export class AppModule { 
  title = 'Angular Application';
  isSideBarOpen = true;

  openSideBar() {
    this.isSideBarOpen = true;
  }
  closeSideBar() {
    this.isSideBarOpen = false; 
  }
}

即使我声明了变量 isSideBarOpen，为什么我得到变量 isSideBarOpen 不存在错误。

Answer 1

考虑到 app.component.html

中的 html 代码，该变量应该存在于 app.component.ts 而不是 app.module.ts 中

属性 'isSideBarOpen' 在类型 'AppComponent' 上不存在

Property 'isSideBarOpen' does not exist on type 'AppComponent'

angular

typescript

data-binding

sidenav

mat-sidenav