无法读取this.sidenav.toggle;

如何解决无法读取this.sidenav.toggle;

我正在将mat-sidenav用于导航抽屉

<mat-sidenav-container class="sidenav-container">
   <mat-sidenav #sidenav [mode]="isMobile ? 'over' : 'side'" [opened]="!isMobile" class="example-sidenav">
   </mat-sidenav>
   <mat-sidenav-content>
    <falcon-button-toggle *ngIf="isMobile" [field]="htmlButtonToggleConfig"
                    (toggleGroupChange)="toggleChange($event)"></falcon-button-toggle>
   </mat-sidenav-content>
</mat-sidenav-container>

TS文件 当点击事件出现时，滑块是不确定的。

export class ProductListComponent implements OnInit {
  @ViewChild('sidenav',{ static: true }) public sidenav: MatSidenav;
    toggleChange($event) {
        switch ($event) {
          case ProductDetailsSortFilterEnum.Filter:
            this.sidenav.toggle();
            break;
        }
      }}

this.sidenav未定义