我对嵌套异步管道如何以及何时在 angular2 模板中解析感到有点困惑,而且文档目前位置不佳,所以我希望 SO 上的某个人可以提供帮助。
我有一个非常简单的 Rxjs Observable 从服务返回,通过 Observable.of(myArray).delay(2000)
- 延迟有助于显示时间的变化。
在我的模板中,我只是在封闭的 <p>
中对上面返回的可观察对象使用异步管道标签来控制它何时显示,然后尝试在 <p>
中显示返回的数组长度标签:
<p *ngIf="!(lists | async)">Waiting for lists...</p>
<p *ngIf="lists | async">We have lists! How many? => {{(lists | async)?.length}}</p>
所以当你加载它时,会显示“等待列表”,2 秒后我们会得到“我们有列表!”部分,如预期的那样,但是内部异步管道又需要 2 秒来解析并显示解析的数组长度。
我怎样才能让长度与其他依赖于 Observable 返回其值的东西同时出现?或者这不是异步管道的好用例,我应该 subscribe()
而不是在我的组件中?
最佳答案
异步管道就好了。这个主题还涉及另一件事。
查看 NgIf指令源代码。
当条件为真时,它将 View 嵌入到 View 容器中。
this._viewContainer.createEmbeddedView(this._templateRef);
ViewContainerRef#createEmbeddedView 的文档
Instantiates an Embedded View based on the templateRef and inserts it into this container at the specified index.
基本上,它获取 NgIf 中的任何内容,将其实例化并将其放入 DOM 中。
当条件为假时,它会从 DOM 中删除所有内容并清除其中的所有 View
this._viewContainer.clear();
Destroys all Views in this container.
那么,既然我们知道了 NgIf 的作用,您为什么会看到这种行为?很简单,我会分步骤解释
<p *ngIf="!(lists | async)">Waiting for lists...</p>
: 此时lists
结果尚未到达,因此执行。<p *ngIf="lists | async"
: 这个ngIf会在两秒后执行(你给它设置的延迟时间)。一旦值到达,NgIf 指令将实例化其中的内容并将其放入 DOM 中。(lists | async)?.length
: 这个异步管道在它被初始化后执行,比上面晚了两秒。
所以你的时间线看起来像这样(我对我糟糕的时间线设计感到非常抱歉)
*ngIf="lists | async"
----(2 seconds)----->
(lists | async)?.length
------(2 seconds)----->
print value
这就是您看到这种差异的原因。 *ngIf
未与 ?.length
并行运行.
如果您想立即看到它,您必须删除 delay
运算符,或手动订阅并自己设置值,如下所示
// Template
<p *ngIf="lists">We have lists! How many? => {{lists.length}} some value</p>
// Observable
this._listService.getLists(2000).subscribe(res => this.lists = res);
这当然会影响您的其他异步管道。看这个plnkr与您的代码一起工作。
我希望这有助于澄清一点。
关于angular - 嵌套的 Angular2 异步管道如何解决?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35761954/