angular - 嵌套的 Angular2 异步管道如何解决？

Question

我对嵌套异步管道如何以及何时在 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>

View the Plunker.

所以当你加载它时，会显示“等待列表”，2 秒后我们会得到“我们有列表!”部分，如预期的那样，但是内部异步管道又需要 2 秒来解析并显示解析的数组长度。

我怎样才能让长度与其他依赖于 Observable 返回其值的东西同时出现？或者这不是异步管道的好用例，我应该 subscribe()而不是在我的组件中？

Answer 1

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

查看 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();

ViewContainerRef#clear 的文档

Destroys all Views in this container.

那么，既然我们知道了 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与您的代码一起工作。

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