访问异步数组

时间:2016-11-16 06:25:48

标签: angularjs angular firebase angularfire2

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

这是我试过的

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

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

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

3 个答案:

答案 0 :(得分:3)

你可以使用这样的管道:

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

并在你的HTML中

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

<强> Plunker Example

答案 1 :(得分:2)

?(安全导航)仅适用于.(取消引用运算符)而不适用于[](索引访问运算符)

可能有用的是

<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>

}

答案 2 :(得分:2)

我会这样做:

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

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