如果有对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 已经解决了该问题。
参考链接:http://www.linuxidc.com/Linux/2017-03/142268.htm
https://github.com/angular/angular/blob/master/CHANGELOG.md#enhanced-ngif-syntax
原文链接:https://www.f2er.com/angularjs/148486.html