如何在Angular 6中不使用*ngIf将异步管道的结果分配给变量

是否可以在没有*ngIf的情况下将（AreShipseXExpanded$| async）赋值给变量？因为如果这是标志

true

/

false

，当我有：

*ngIf=“（areShipsExpanded$| async）as flag”

时，按钮在false的情况下不显示

我想要这样的东西：

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

{（标志？“折叠”：“展开”}

您可以使用

ng模板

和

ng容器

<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>

{flag？“Collapse”：“Expand”}

---

在这里参加聚会有点晚了，但我发现了一个很好的例子，说明了如何从这里做到这一点

您仍然使用

*ngIf

，但您确保它始终通过将可观察值作为属性传入新对象来计算truthy

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

{{valuesObject.value1}

在我看来，这仍然有点老套，但比另一个答案或创建自己的

*ngLet

指令要简单得多

---

如本文所述，这也是一种将多个对象属性中的多个可观察值组合在一起的好方法，这样您就不必有多个

async

语句或嵌套的

元素。

为什么不执行

{（areShipsExpanded$|async？“Collapse”：“Expand”}

（单击）=“expandAllShips”（flag）

正因为如此？为什么不在组件中订阅

areShipsExpanded$

，并将其分配给

flag

属性？当然可以，但我想知道是否可以直接从async执行：）这是另一种方式，对我来说，这似乎太垃圾了，*ngIf解决方案在我的案例中有效，但我宁愿避免它。尽管如此，我还是更喜欢我的案例中的*ngIf解决方案，这一个。有什么建议@AmitChigadani？