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

时间:2016-03-03 02:19:16

标签: angular

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

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

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

<p>

View the Plunker.

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

如何在与Observable返回其值相关的所有其他内容的同时显示长度?或者这不是异步管道的一个很好的用例,我应该只在我的组件中<p *ngIf="!(lists | async)">Waiting for lists...</p> <p *ngIf="lists | async">We have lists! How many? => {{(lists | async)?.length}}</p>

2 个答案:

答案 0 :(得分:10)

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

检查NgIf指令源代码。

当条件为真时,它将视图嵌入到视图容器中。

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:此异步管道在实例化后执行,比上述时间晚两秒。

  4. 所以你的时间表看起来像这样(我真的很抱歉我糟糕的时间表设计)

    *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

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

答案 1 :(得分:0)

我有类似的问题,但有两个不同的可观察量。为了使其有效,我将*ngIf="list | async"替换为[hidden]="!(list | async)"。这样可以保留DOM中的元素并更新数据。