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

问题描述 投票:0回答:2

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

angular
2个回答
2
投票

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

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

1
投票

一种可能的解决方案是返回服务中的一个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

© www.soinside.com 2019 - 2024. All rights reserved.