Angular 无法读取未定义的属性 'subscribe'

Question

我正在尝试使用来自服务器的 json 响应创建动态菜单，但出现此错误:

MenuComponent.html:4 ERROR TypeError: Cannot read property 'subscribe' of undefined at MatMenuTrigger.push../node_modules/@angular/material/esm5/menu.es5.js.MatMenuTrigger.ngAfterContentInit

当我点击按钮时，它会这样说:

ERROR TypeError: Cannot read property 'createEmbeddedView' of undefined at ViewContainerRef_.push../node_modules/@angular/core/fesm5/core.js.ViewContainerRef_.createEmbeddedView

我猜测无法创建按钮是因为 json 响应尚未准备好，但我不知道如何修复它。

Component.ts

export class MenuComponent implements OnInit {
  branchList: Branches = new Branches(); //read somewhere that I need to initialize, not sure

  ngOnInit(): void {
    this.http.get('http://demo8635782.mockable.io/branches').subscribe((data: any) => {
      if (data === null) {
        console.log('api request returns empty!');
      }
      this.branchList = data;
    });
  }

  constructor(private breakpointObserver: BreakpointObserver, private http: HttpClient) {
  }
}

Template.html

<button mat-button [matMenuTriggerFor]="branchesMenu">Branches</button>
<mat-menu #branchesMenu="matMenu">
  <div *ngFor="let branch of branchList?.branches">
    <button mat-menu-item [matMenuTriggerFor]="branch?.name">{{branch.name}}</button>
  </div>
</mat-menu>

Stackblitz

Answer 1

我在这个 stackblitz 中解决了它我使用正确版本的 Material 和 Angular 更新依赖项，使用模板中的可观察对象将按钮包装在 ngIf 中，还删除了 mat-menu-item 的 matMenuTriggerFor 并在 app.module 中导入 BrowserAnimationsModule。

编辑以添加子菜单，为此您必须在 ngFor 迭代中创建子菜单。