如何在Angular组件中显示可观测数据

Question

我在组件中显示可观察对象时遇到问题。

我的Json结构是：

{ 
  "data": [
    {
     "id": "123",
     "name": "test",
    } 
  ], 
  "pagination": null
}

所以我创建了一个接口来将这个json映射到.ts

export interface Paginated<T>{
   data: Array<T>;
   pagination: Pagination;
}

在我的组件中，我有这个json的可观察对象：

 this.httpClient.get<Paginated<Event>>(`${environment.apiUrl}/events`);

我不知道如何显示内部可见的属性数据

所以我的问题是，当我收到可观测数据时，如何在组件中显示这些属性数据

Answer 1

如果您想从可观察对象中提取值，可以通过以下方式订阅其值：

data: Array<T> = [];

constructor(){
   this.httpClient.get<Paginated<Event>>(`${environment.apiUrl}/events`).subscribe((response) => {

      // then extract the data from response over here
      const {data, pagination} = response;

      // assign the extracted 'data' array to a component variable named data.
      this.data = data;

   });
}

在html模板中，您可以使用

<li *ngFor="let el of (data)">{{data.name}}</li>

Answer 2

试试这个

response$: Observable<Paginated<Event>>;
constructor() {
  response$ = this.httpClient.get<Paginated<Event>>(`${environment.apiUrl}/events`);
}

在你的组件中

<li *ngFor="let dataEl of (response$ | async)?.data">{{dataEl.name}}</li>