我正在使用一个返回如下响应的 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);
我想迭代可观察的请求数组,并且我在 html 中使用异步管道
HTML:
<div class="request-items-inner" *ngFor="let request of requestResponse.requests | async">
{{request.createdAt}}
</div>
但这不会在屏幕上显示任何内容。如果我使用 *ngFor="let request of requestResponse| async" 它会在控制台中给出错误。
最佳答案
您需要首先使用“异步”管道解包响应,然后迭代请求数组。
<div class="request-items-inner" *ngFor="let request of (requestResponse | async)?.requests">
{{ request.createdAt }}
</div>
关于angular - 如何使用异步管道循环遍历可观察对象内的数组?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49756781/