Angular4 ngIf 局部变量赋值和比较同时进行？答案

【问题标题】：Angular4 ngIf local variable assignment and comparison at the same time?Angular4 ngIf 局部变量赋值和比较同时进行？
【发布时间】：2017-08-21 10:55:36
【问题描述】：

我使用new Angular local variable assignment feature 来引用ngIf 下子元素中的异步管道的结果：

<nav *ngIf="dataService.count$ | async as count">
  <div *ngIf="count > 1">
    There's more than one!  It's actually {{count}}.
  </div>
</nav>

如您所见，我在层次结构中有一个额外的div，只是为了获取异步管道的结果，然后对其进行比较。我觉得我应该能够在一个表达式中做到这一点，但我找不到关于新功能的足够文档。我尝试了各种使用括号的方法，使用 | async; let count 等，但我不知道如何在一行中完成这两项操作。

（指向ngIf 中有关局部变量声明语法的任何文档的指针也将不胜感激——我从未听说过foo$ | async as foo，直到我在这里看到它。）

【问题讨论】：

您可以使用ng-container，这仍然会在代码中为您提供一个额外的“容器”，但在渲染视图时不会。
这个问题应该有 angular 4 标签。
我这里的回答并不是你问题的真正答案，而是非常相关的，同样的事情可以应用：stackoverflow.com/a/44696109/2521893
它在 Angular 文档中：angular.io/api/common/NgIf 并且在这里提出了同样的问题：github.com/angular/angular/issues/16173
感谢 Vega，我确实阅读了这些文档，虽然他们提到了 async as，但他们并没有提及 foo$ | async; let foo，我相信这也有效。根据您的 GH 问题链接，看起来这还没有速记，我可能会遇到 2 个元素。

标签： angular

【解决方案1】：

我最初的问题仍然没有一个简单的解决方案，但我发现了一个相关的模式，可以帮助处于类似情况的其他人：

<div id="top-container" *ngIf="{
  count: dataService.count$ | async,
  otherVal: dataService.val$ | async
}; let props">
  <nav *ngIf="props.count > 1">
    There's more than one!  It's actually {{props.count}}.
  </nav>
  <span *ngIf="props.otherVal?.startsWith('abc')">...</span>
</div>

基本上，您可以在顶级元素的*ngIf 结构指令中定义一个内联普通对象，其值是异步管道订阅。该对象将始终被定义（在 ViewInit 之后，这很重要，因为它破坏了@ViewChild(..., {static: true}！），因此 if 条件永远不会失败，并且顶级 DOM 元素始终存在。但是由于异步管道的工作方式，对支持任何属性的 Observable 的任何更改都将触发组件中的更改检测，并且您只能获得一个订阅。

如果您没有顶级组件来粘贴您的异步管道包，或者顶级 *ngIf 的存在使您对 ViewChild 的使用过于复杂，您可以使用嵌套的 ng-container正如 @Jan_V 在 cmets 中建议的那样，它避免了生成的 DOM 结构中未使用的元素。（如果有更好的答案，我会保留这个问题。）

【讨论】：