嵌套Angular2异步管道如何解析？

Question

我对于如何以及何时在angular2模板中解析嵌套异步管道感到困惑,而且文档目前还不是很好,所以我希望有人可以提供帮助.

我有一个非常简单的Rxjs Observable从服务返回,通过Observable.of(myArray).delay(2000)- 延迟是为了帮助显示时间正在发生的事情.

在我的模板中,我只是在封闭<p>标记中上面返回的observable上使用异步管道来控制它何时显示,然后尝试在该<p>标记内显示返回的数组长度:

<p *ngIf="!(lists | async)">Waiting for lists...</p>
<p *ngIf="lists | async">We have lists! How many? => {{(lists | async)?.length}}</p>

查看Plunker.

所以当你加载它时,会显示"等待列表",2秒后我们会得到"我们有列表!" part,正如预期的那样,但内部异步管道需要另外2秒才能解析并显示已解析的数组长度.

如何在与Observable返回其值相关的其他所有内容的同时显示长度？或者这不是异步管道的一个很好的用例,我应该只subscribe()在我的组件中？

Answer 1

异步管道就好了.这个主题涉及另一件事.

检查NgIf指令源代码.

条件为true时,它将视图嵌入到视图容器中.

this._viewContainer.createEmbeddedView(this._templateRef);

ViewContainerRef的文档#createEmbeddedView

基于templateRef实例化嵌入式视图,并将其插入到指定索引处的此容器中.

基本上它接受NgIf中的任何内容,实例化它并将其放入DOM中.

当条件为false时,它会从DOM中删除所有内容并清除其中的所有视图

this._viewContainer.clear();

ViewContainerRef的文档#clear

销毁此容器中的所有视图.

那么,既然我们知道NgIf做了什么,为什么你会看到这种行为？很简单,我会逐步解释

1. <p *ngIf="!(lists | async)">Waiting for lists...</p>:此时lists结果尚未到达,因此执行此操作.

2. <p *ngIf="lists | async":此ngIf将在两秒钟内执行(您为其设置的延迟时间).一旦值到达,NgIf指令将实例化其内部并将其放入DOM中.

3. (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并使用您的代码.

我希望这有助于澄清一点.