Html MatSidenav中的角度材质UI错误：无法设置属性'；固定端隙'；未定义的

我试图使用angular 11创建一个angular material工具栏和sidenav。但是当我试图设置sidenav的属性时，如下图所示，它在中给出了以下错误。控制台，并导致第一个菜单列表项（mat nav list）未在初始页面加载中加载

ERROR TypeError: Cannot set property 'fixedTopGap' of undefined
at AppComponent.ngOnInit (app.component.ts:19)
at callHook (core.js:2535)
at callHooks (core.js:2506)
at executeInitAndCheckHooks (core.js:2457)
at refreshView (core.js:9433)
at renderComponentOrTemplate (core.js:9532)
at tickRootContext (core.js:10758)
at detectChangesInRootView (core.js:10783)
at RootViewRef.detectChanges (core.js:22751)
at ApplicationRef.tick (core.js:29491)

下面给出了我的app.component.ts

import { Component,ViewChild, HostListener, OnInit } from '@angular/core';
import { MatSidenav } from '@angular/material/sidenav';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ui-material';
  opened = true;
  @ViewChild('sidenav') sidenav: MatSidenav;

  ngOnInit() {
    console.log(window.innerWidth)
    if (window.innerWidth < 768) {
      this.sidenav.fixedTopGap = 55;
      this.opened = false;
    } else {
      this.sidenav.fixedTopGap = 55;
      this.opened = true;
    }
  }

@HostListener('window:resize', ['$event'])
onResize(event:any) {
  if (event.target.innerWidth < 768) {
    this.sidenav.fixedTopGap = 55;
    this.opened = false;
  } else {
    this.sidenav.fixedTopGap = 55
    this.opened = true;
  }
}

isBiggerScreen() {
  const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  if (width < 768) {
    return true;
  } else {
    return false;
  }
}

从'@angular/core'导入{Component，ViewChild，HostListener，OnInit}；
从'@angular/material/sidenav'导入{MatSidenav}；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
标题='用户界面材料'；
开放=真；
@ViewChild（'sidenav'）sidenav:MatSidenav；
恩戈尼尼特（）{
console.log（window.innerWidth）
如果（窗内宽度<768）{
this.sidenav.fixedTopGap=55；
this.opened=false；
}否则{
this.sidenav.fixedTopGap=55；
this.opened=true；
}
}
@HostListener（'窗口：调整大小'，['$event']））
onResize（事件：任意）{
如果（event.target.innerWidth<768）{
this.sidenav.fixedTopGap=55；
this.opened=false；
}否则{
this.sidenav.fixedTopGap=55
this.opened=true；
}
}
isBiggerScreen（）{
常量宽度=window.innerWidth | | document.documentElement.clientWidth | | document.body.clientWidth；
如果（宽度<768）{
返回true；
}否则{
返回false；
}
}

app.component.html

<mat-toolbar color="primary" class="header">
  <div>Organization Services</div>
  <span class="nav-tool-items">
    <mat-icon (click)="sidenav.toggle()" class="hamburger">menu</mat-icon>
  </span>
</mat-toolbar>

<mat-sidenav-container autosize>
  <mat-sidenav #sidenav [mode]="isBiggerScreen() ? 'over' : 'side'" [(opened)]="opened" [fixedInViewport]="true"
    [fixedTopGap]>
    <mat-nav-list>
      <a mat-list-item routerLinkActive="active" routerLink="/search">
        <mat-icon>search</mat-icon> Search
      </a>
      <a mat-list-item routerLinkActive="active" routerLink="/unit">
        <mat-icon>add_business</mat-icon>Unit
      </a>
      <a mat-list-item routerLinkActive="active" routerLink="/add">
        <mat-icon>person</mat-icon> Add
      </a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

组织服务
菜单
搜索
添加业务单元
人加

好的，我在angular 11中找到了解决方案，更改了视图子项的sidenav声明，如下所示

  @ViewChild('sidenav',{static:true}) sidenav: MatSidenav;

如果您找到更好的方法，请告诉我：）