Angular 2那些坑 —— async 管道

如果有对Angular 2中管道的使用上手的同学，一定也踩了此坑。

问题是这样的，需要在模板中通过async管道获取一个Observable（我这里是http发AJAX请求返回的对象）回调才能获取的值。

{{ observeObj | async }}

一开始没有问题，因为我的Observable回调拿到的是数组，是这么用的：

<div *ngFor="let item of observeList | async">
  <p>{{ item.fieldName }}</p>
</div>

没毛病，对不对？

但是，如果多次对同一对象使用async，其实会发出多次AJAX请求。

罢了，回到问题开始，如果是一个非数组对象，是单个对象的话，一般需要取该对象的多个属性。这就有些尴尬了，每使用一次async管道就会发一次AJAX请求，这就掉坑里了。

然鹅，官方目前并没有合理的解决方式，可以看一下这个Issue讨论。

其中这条回复提到可以放弃使用Observable，在subscribe回调中将赋值到组件成员变量，那由于是异步的，结果不知道什么时候返回，那模板中就需要添加*ngIf判断变量是否undefined。

另外这位主要贡献者的回复提供了自定义指令来处理这个问题，坑暂时不会在新发布的版本中填，因为他们也在讨论最佳的实现方式。

2017年03月30日15:05:56 更新：

据了解，Angular 4 已经解决了该问题。

相关文章