时间戳

首页 > 解决方案 > 如何在 Angular 组件中显示来自 Observable 的数据

javascript - 如何在 Angular 组件中显示来自 Observable 的数据

问题描述

我在组件中显示 Observable 对象时遇到问题。

我的 Json 结构是：

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

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

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

在我的组件中，我有这个 json 的 Observable 对象：

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

而且我不知道如何使用异步管道显示 Observable<Paginated> 内部的属性数据，因为这个 json 不是一个数组 - 它是具有两个属性的对象 -数据和分页所以我不能简单地使用 *ngFor异步管道，因为此对象不是数组。

所以我的问题是当我收到 Observable<Paginated> 时如何在组件中显示这个属性数据我不能使用 *ngFor... 如何从这个 Observable<Paginated> 解压数据属性

标签： javascriptangularapigetobservable

解决方案

尝试这个

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>

推荐阅读