如何使用异步管道遍历可观察对象内的数组？答案

【问题标题】：How to loop through array inside an observable using async pipe?如何使用异步管道遍历可观察对象内的数组？
【发布时间】：2018-09-20 06:13:11
【问题描述】：

我正在使用一个返回如下响应的 API：

case:1
requests:[reqObj1,reqObj2,reqObj3]
count:3
message:"Found requests successfully."
pagesCount:1

服务：

listRequest(sort, records, pageNumber, queries?): Observable<any> {
    const updateQueries = this.gtn.getHeaders() as RequestOptions;
    updateQueries.params = queries;
    return this.http
      .get(globals.domain + '/team/requests/list/sortBy-' + sort + '/' + records + '/' + pageNumber + '/', updateQueries)
      .map(res => {
        this.responseData = res.json();
        return this.responseData;
      });
  }

这将返回一个带有上述响应对象的 Observable，我将在组件中获取这个 observable 并将其分配给组件中的本地 observable。

组件：

this.requestResponse= this.rts.listRequest(sort, records, page, this.q);

我想遍历 observable 中的请求数组，并且我在我的 html 中使用异步管道

HTML：

    <div class="request-items-inner" *ngFor="let request of requestResponse.requests | async">
{{request.createdAt}}
</div>

但这不会在屏幕上显示任何内容。如果我使用 *ngFor="let request of requestResponse| async" 它会在控制台中出现错误。

【问题讨论】：

标签： angular typescript

【解决方案1】：

您需要先使用“异步”管道解开响应，然后遍历请求数组。

<div class="request-items-inner" *ngFor="let request of (requestResponse | async)?.requests">
  {{ request.createdAt }}
</div>

【讨论】：

太棒了，谢谢！
很高兴我能帮上忙 :)
顺便说一句，假设我有一个加载组件，我在等待数据时如何使用它？
如何在循环或解包observable之前检查数据是否由Observable返回或数据是否为空？？