Angular中如何从数组类型Observable的异步绑定结果中获取单个元素

解决方案 #

正确的写法是先用括号包裹async管道的整个执行结果，再对解包后的数组做索引访问：

<p> {{ (service.myObs$ | async)[1] }} </p>

原写法错误原因 #

• 第一种{{service.myObs$[1] | async}}：你是先对Observable对象本身取索引[1]，Observable并不是数组，这个操作取到的是undefined，再传给async管道自然没有内容输出。
• 第二种{{service.myObs$ | async[1]}}：你试图对async管道本身取索引，完全不符合Angular管道的语法规则，所以直接编译失败。

优化方案（推荐） #

如果需要多次访问这个Observable返回的数组元素，可以用*ngIf结合as关键字给解包后的数组起别名，既可以避免重复写async管道，还能保证整个过程只对Observable订阅一次，性能更优：

<ng-container *ngIf="service.myObs$ | async as strArr">
  <p>第1个元素：{{ strArr[0] }}</p>
  <p>第2个元素：{{ strArr[1] }}</p>
  <!-- 其他需要用到数组元素的地方直接复用strArr即可 -->
</ng-container>

内容的提问来源于stack exchange，提问作者WorstCoder4Ever