angular 中的 Ngfor 和插值

Question

<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 无效？

Answer 1

它不起作用，因为 links$ 是一个 Observable 而不是数组。如果首先从中提取数据（发出后），您所写的内容就可以工作：

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

Answer 2

links$ 是一个 Observable<Array<T>> 意味着它不包含任何值，它只是一个允许从 Subject<Array<T>> here 捕获值的订阅者。表达式 let in of link$ | async 表示此块 *ngFor 必须等待，直到新数组来自 Subject by 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')
}

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

angular 中的 Ngfor 和插值

Ngfor and interpolation in angular

angular

interpolation

ngfor