Question

当我通过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页面中未显示的数据

Answer 1

dataKeys是不返回任何内容的函数.....在您的ngOnInit中调用dataKeys，然后使用

<mat-list-item role="listitem" *ngFor="let result of items">
   {{ result.firstName }} {{result.middleName}} {{result.familyName}}
</mat-list-item>

Answer 2

一种可行的解决方案是在服务中返回一个可观察的对象（作为一种好习惯）。

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

在控制台中获取数据，但未在Angular 7页面中显示

2 个答案: