Angular 无法读取未定义的属性“subscribe”
我正在尝试使用来自服务器的 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 中解决了这个问题 我使用正确版本的material和angular更新依赖项，在模板中使用可观察对象将按钮包装在ngIf中，还删除了mat-menu-item的matMenuTriggerFor并在app.module中导入BrowserAnimationsModule。
编辑以添加子菜单，为此您必须在ngFor迭代中创建子菜单。
您把它复杂化了。这只是 HttpClient.get 的返回类型的问题。显然它没有返回 Observable，您需要阅读库的文档才能了解原因。
您还可以大大简化代码：
export class AppComponent {
readonly branches = this.http
.get('https://demo8635782.mockable.io/branches')
.pipe(
map((data) => data as Branches),
map(({branches}) =>branches),
shareReplay(),
);
constructor(private http: HttpClient) {}
}
<button mat-button [matMenuTriggerFor]="branchesMenu">Branches</button>
<mat-menu #branchesMenu="matMenu">
<button mat-menu-item *ngFor="let branch of (branches | async)">{{branch.name}}</button>
</mat-menu>
编辑： 不，完全错误。正如 Daniel Caldera 在下面指出的那样，实际问题是 mat-menu-item 的 matMenuTriggerFor。
其他问题：
- 您需要导入 BrowserAnimationsModule
- 您需要导入操作符 (map、shareReplay)
- 您需要在 CSS 中包含主题
- 您不应该取消引用异步，正如我最初建议的那样
这里 是我的工作版本。
我遇到了类似的问题。登录后刷新了我的令牌。 后端需要令牌，因此请求必须使用有效令牌。
确保您的请求中有有效令牌。
检查您的后端。