时间戳

首页 > 解决方案 > Ngfor和角度插值

angular - Ngfor和角度插值

问题描述

<div class="container latestNew" *ngFor="let link of links$ | async">
  <div class="col">{{ link.title }}</div>
  <div class="col">{{ links$[0].title }}</div>
</div>

有人能告诉我为什么link.title有效但links$[0].title无效吗？

标签： angularinterpolationngfor

解决方案

links$是一种Observable<Array<T>>不包含任何值的方法，它只是允许从Subject<Array<T>> 此处捕获值的订阅者。该表达式let in of link$ | async表示必须等待此块 *ngFor 直到新数组来自Subjectby next(new Array<T>[])，它将被设置到link每个接收到的对象中。

在你的情况下，我想你打电话HttpClient并在你的下面声明一行Component

links$: Observable<Array<Link>>
ngOnInit(): void {
   // Retrieve a links list from API
   this.links$ = this.httpClient.get<Array<Link>>('http://localhost/api/links')
}

使用此代码，您希望确保links$在呈现 HTML 之前从 API 检索数据。所以 Angular 为你提供了一个表达式| async，awaiter直到你的 API 完成。let link在一个表达式中帮助您访问每个link检索到的数据。

推荐阅读