如何在Angular 6中没有* ngIf的情况下将异步管道的结果分配给变量

Question

是否可以在没有 *ngIf 的情况下将 (areShipsExpanded$ | async) 分配给变量？因为如果这是标志true/false当我有：*ngIf="(areShipsExpanded$ | async) as flag"然后按钮不会在错误的情况下显示。

我想要这样的东西：

<button *let="(areShipsExpanded$ | async) as flag"
   (click)="expandAllShips(flag)">{{(flag ? "Collapse" : "Expand"}}
</button>

Answer 1

虽然有点晚了，但我从这篇中等文章中找到了一个很好的例子来说明如何做到这一点

您仍然使用*ngIf，但您通过传入一个新对象并将您的可观察值作为属性来确保它始终评估真实性。

<div *ngIf="{value1: myObs$ | async} as valuesObj">
    {{ valuesObject.value1 }}
</div>

在我看来，这仍然有点老套，但比其他答案或创建自己的*ngLet指令要少得多。

正如本文中提到的，这也是将多个对象属性中的多个可观察值分组在一起的好方法，因此您不必拥有多个async语句或嵌套<ng-container>元素。

Answer 2

使用@ngrx/component*ngrxLet中的指令

<ng-container *ngrxLet="observableNumber$ as n">
   <app-number [number]="n">
   </app-number>
</ng-container>

包含该ngrxLet指令的元素的可见性不受可观察表达式的值的影响。

Answer 3

你可以使用ng-template和ng-container

<ng-template #myTempl let-flag="areShipsExpand">
      <button
   (click)="expandAllShips(flag)">{{flag ? "Collapse" : "Expand"}}
  </button>
</ng-template>

<ng-container *ngTemplateOutlet="myTempl; context:{areShipsExpand: areShipsExpanded$ | async}"></ng-container>

演示