Angular 2那些坑 —— async 管道

前端之家收集整理的这篇文章主要介绍了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 已经解决了该问题。

参考链接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

猜你在找的Angularjs相关文章