文档章节

Angular 2那些坑 —— async 管道

中场三分
 中场三分
发布于 2016/12/10 00:17
字数 401
阅读 1471
收藏 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
海淀
高级程序员
【前端】Angular组件钩子

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/m18633778874/article/details/82259409 Angular中的钩子方法,是非常常用的知识点,也在项目代码运用中有所体...

冯浩月
08/31
0
0
7本学习AngularJS的免费电子书

电子书可以给我们一个有结构有组织的方式学习新的知识。学习 AngularJS也一样。现在最棒的事情莫过于电子书中提供大量实践练习,帮助我们理解各种方面。 让我们度下面7本书探究 AngularJS 吧...

咲晚杍
2015/01/28
0
0
ngular2 VS Angular4 深度对比:特性、性能

在Web应用开发领域,Angular被认为是最好的开源JavaScript框架之一。 Google的Angular团队已于3月23日发布了Angular4,而期待已久的Angular2版本则是之前版本的完全重构。 对于成熟的开发人员...

机器的心脏
06/02
0
0
勿以 star 数论高低!React 在前端框架世界仍是领先地位

上周在前端的 JavaScript 框架世界发生了一件称得上是“里程碑”的事:Vue.js 在 GitHub 上的 star 数量终于超过了 React.js 的 star 数量。 通过使用一个叫做 Star History 的工具,我们可以...

局长
06/21
0
0
【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878
05/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

技术工坊|如何降低区块链应用的使用门槛(上海)

当区块链技术从专业研究走向市场应用,开发者需要考虑用户的使用场景和使用门槛,例如通过ETH支付gas手续费,或者注册一个16进制的用户名,普通用户都难以接受。 10月20日,HiBlock区块链社区...

HiBlock
4分钟前
0
0
Daemon线程--《Java并发编程的艺术》学习笔记

daemon线程即守护线程 当一个JVM中不存在非Daemon线程时,JVM将会退出 也就是说当非Daemon线程都执行完毕时,java程序也就结束了。 可以通过调用Thread.setDaemon(true)将线程设置为Daemon线...

karma123
10分钟前
0
0
scala类型参数的上界和下界

class Pair[T <: Comparable[T]](val first:T,val second:T) //类型T必须要是Comparable接口的子类(即T是Comparable的下界){ def bigger = if(first.compareTo(second) > 0) first e......

whoisliang
20分钟前
0
0
Vue中路由管理器Vue Router使用介绍(一)

一、在模块编程中安装VueRouter 1.Npm安装vue-router npm install vue-router 2.在main.js中引用并使用VueRouter import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(Vu......

tianma3798
22分钟前
0
0
TypeScript基础入门之声明合并(一)

转发 TypeScript基础入门之声明合并(一) 声明合并 介绍 TypeScript中的一些独特概念描述了类型级别的JavaScript对象的形状。 TypeScript特别独特的一个例子是"声明合并"的概念。 在使用现有J...

durban
36分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部