Ngfor和角度插值答案

【问题标题】：Ngfor and interpolation in angularNgfor和角度插值
【发布时间】：2020-07-15 09:26:20
【问题描述】：

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

【问题讨论】：

links$ 是一个 observable （这就是为什么你必须用 | async 解析值），所以 links$[0] 是 undefined。
即使我这样使用 {{ links$[0].title |异步}}。还是不行
不清楚为什么你会认为它会，links$ 仍然是可观察的，所以 links$[0] 仍然是 undefined。如果您想访问数组，请执行例如links$ | async as links如下图。

标签： angular interpolation ngfor

【解决方案1】：

links$ 是一个Observable<Array<T>> 意味着它不包含任何值，它只是一个允许从Subject<Array<T>> here 捕获值的订阅者。表达式let in of link$ | async 表示必须等待此块 *ngFor 直到next(new Array<T>[]) 来自Subject 的新数组，每个接收到的对象都会将其设置为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。

【讨论】：

【解决方案2】：

它不起作用，因为 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>

【讨论】：