文档章节

Angular 2那些坑 —— async 管道

中场三分
 中场三分
发布于 2016/12/10 00:17
字数 401
阅读 1611
收藏 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

© 著作权归作者所有

共有 人打赏支持
中场三分

中场三分

粉丝 11
博文 6
码字总数 2329
作品 0
海淀
高级程序员
私信 提问
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.1K
26
2018 年,Angular JS 框架是否还值得学习?

越来越多人对学习开发和搭建自己的网站感兴趣,如果你也是,那么 2018 年将是提高技能理想的一年。我们不妨先从 JavaScript 框架开始,但在这篇文章里谈论得更多的将是 Angular JS。 Angula...

局长
02/16
2.8K
6
Google 的 Angular 迫使我放弃了 Web 开发

前言 判断一个公司是否开始走下坡路的方法就是看长期以来他们产品效用的发展情况。比如苹果公司在发布 iPhone 时产品的效用大幅增加,随后的一段时间内也在上升,但最终在他们删掉一些重要功...

CSDN资讯
11/19
0
0
开源中国的 AngularJS 优秀文章汇总

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

oschina
2014/08/24
5.7K
13
angular-async-loader 1.3.0 发布

angular-async-loader 是一个为 angular.js 1.x 应用添加异步加载module/controller/services/filters/directive等模块功能组件。 2016-05-20 angular-async-loader 1.3.0 发布 增加 app.us......

Sub
2016/05/20
856
0

没有更多内容

加载失败,请刷新页面

加载更多

[开源系统] springboot快速开发框架推荐

本期为大家精选了 码云 上优秀的 Spring Boot 语言开源项目,涵盖了企业级系统框架、文件文档系统、秒杀系统、微服务化系统、后台管理系统等,希望能够给大家带来一点帮助:) 1、项目名称:...

MoksMo
8分钟前
0
0
深入解析Vue里函数的调用顺序介绍

今天为大家分享一篇对vue里函数的调用顺序介绍,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。 method用来定义方法的,比如你@cl...

前端攻城老湿
15分钟前
1
0
深入总结Javascript原型及原型链

本篇文章给大家详细分析了javascript原型及原型链的相关知识点以及用法分享,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。 我们创建的每个函数都有一...

前端攻城小牛
17分钟前
1
0
千万级规模【高性能、高并发】互联网架构经验分享~

作者:Java关博 链接:http://blog.51cto.com/14049376/2329037?utm_source=tuicool&utm_medium=referral 架构以及我理解中架构的本质 在开始谈我对架构本质的理解之前,先谈谈对今天技术沙龙...

Java干货分享
18分钟前
0
0
缓存

并发情况下发生的缓存问题: 缓存一致性: 缓存穿透:是指在高并发场景下,如果某一个key被高并发的访问,缓存没有命中,出于容错性的考虑,会去数据库获取数据,从而导致大量请求访问数据库...

wuyiyi
22分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部