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只是为了获取异步管道的结果，然后对它进行比较。我觉得我应该能够在单个表达式中执行此操作，但我找不到有关新功能的足够文档。我尝试了各种使用parens的方法，使用| 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 结构中未使用的元素。（如果有更好的答案，我会保留这个问题。）

Angular4 ngIf局部变量同时分配和比较？

1 个答案: