访问async数组中的元素

Question

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

这是我曾尝试

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

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

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

Answer 1

您可以使用管道这样的：

@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

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

} 

Answer 3

我会做这样的：

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

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