Angular 2那些坑 —— async 管道
Angular 2那些坑 —— async 管道
JohntoString 发表于10个月前
Angular 2那些坑 —— async 管道
  • 发表于 10个月前
  • 阅读 648
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

如果有对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

共有 人打赏支持
JohntoString
粉丝 11
博文 6
码字总数 2324
×
JohntoString
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: