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

您可以使用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>

DEMO

Answer 2

这里的聚会有点晚了，但我从这个medium article

找到了一个很好的例子来说明如何做到这一点

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

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

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

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

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

2 个答案: