Angular4 ngIf 局部变量同时赋值和比较？

Question

我正在使用 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，直到我在 SO 上看到它。)

Answer 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 元素始终存在。但是由于异步管道的工作方式，对支持任何属性的 Observables 的任何更改都将触发组件中的更改检测，并且您只能获得一个订阅。
如果您没有顶级组件来插入异步管道袋，或者存在顶级 *ngIf使您对 ViewChild 的使用过于复杂，您可以使用嵌套 ng-container正如@Jan_V 在评论中建议的那样，这避免了结果 DOM 结构中未使用的元素。 (如果有更好的答案，我会将问题保持开放。)