Question

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

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

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

<p>

View the Plunker.

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

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

Answer 1

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

检查NgIf指令源代码。

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

this._viewContainer.createEmbeddedView(this._templateRef);

ViewContainerRef#createEmbeddedView的文档

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

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

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

this._viewContainer.clear();

ViewContainerRef#clear的文档

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

所以，既然我们知道NgIf的作用，为什么你会看到这种行为？很简单，我将逐步解释

Waiting for lists...：此时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。

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

Answer 2

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

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

2 个答案: