当我通过http请求获取数据时,我获取数据并在控制台中查看但未在页面中显示
我发送请求ngfor的数据按照部分查看
在组件页面中
items: Teams[]=[];
dataKeys(team:string,sub:number) {
this.id = this.activatedRoute.snapshot.paramMap.get('id');
this.service.getteam(this.id,team,sub).subscribe((data) => {
this.items = data;
console.log(this.items);
return this.items;
});
}
在html页面
<mat-list role="list">
<mat-list-item role="listitem" *ngFor="let result of dataKeys(team,sub)">
{{ result.firstName }} {{result.middleName}} {{result.familyName}}
</mat-list-item>
</mat-list>
控制台中显示的数据但未在html页面中显示
dataKeys是一个不返回任何内容的函数.....在你的ngOnInit中调用dataKeys然后使用
<mat-list-item role="listitem" *ngFor="let result of items">
{{ result.firstName }} {{result.middleName}} {{result.familyName}}
</mat-list-item>
一种可能的解决方案是返回服务中的一个observable(作为良好实践)。
return this.service.getteam(this.id,team,sub);
在您的组件中创建一个可观察的:
public items$: Observable<Team[]>;
然后创建一个函数,将服务返回的值分配给可观察项$。
dataKeys(team:string,sub:number) {
this.id = this.activatedRoute.snapshot.paramMap.get('id');
this.items$ = this.service.getteam(this.id,team,sub);
}
最后在html中使用管道异步:
<mat-list role="list">
<mat-list-item role="listitem" *ngFor="let result of (items$ | async)">
{{ result.firstName }} {{result.middleName}} {{result.familyName}}
</mat-list-item>
管道异步非常强大。它使您的代码更加清洁和简单。如果您想深入研究这个主题,请阅读here