访问异步数组中的元素答案

【问题标题】：Accessing element in async array访问异步数组中的元素
【发布时间】：2016-11-16 06:25:47
【问题描述】：

我有一个 angularjs2 应用程序，它从我的 firebase 服务接收 json 列表。我想访问并显示列表的第一个元素。

这是我尝试过的

<h1>{{(chapters | async)?[0].title}}</h1>

这给了我一个模板解析错误。

如何访问异步数组的第一个元素？

【问题讨论】：

【解决方案1】：

我会这样做：

<h1>{{((chapters | async) || [])[0]?.title}}</h1>

这是一个更通用的解决方案，适用于任何索引，而不仅仅是第一个。

【讨论】：

【解决方案2】：

你可以像这样使用管道：

@Pipe({
  name: 'first'
})
export class First {
  transform(val, args) {
    if (val === null) return val;
    return val[0];
  }
}

在你的 html 中

<h1>{{ (chapters | async | first)?.title }}</h1>

【讨论】：

【解决方案3】：

?（安全导航）仅适用于 .（取消引用运算符），不适用于 []（索引访问运算符）

可行的方法是

<h1>{{(chapters | async)?.length && (chapters | async)[0].title}}</h1>

但我不确定chapters 是否订阅了两次。在这种情况下，这不是一个好的解决方案。 Angular2 在模板绑定中做了一些重复数据删除，但不确定| async。

另一种方法是将结果分配给属性

ngOnInit() {
  this.chapters.subscribe(val => this.captersResult = val);
}

<h1>{{(chaptersResult?.length && chaptersResult[0].title}}</h1>

}

【讨论】：