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

Posted 2023-03-05

【中文标题】如何在Angular 6中将异步管道的结果分配给没有*ngIf的变量

【英文标题】：How to assign result of async pipe to variable without *ngIf in Angular 6

【发布时间】：2019-01-04 11:31:37

【问题描述】：

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

我想要这样的东西：

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

【问题讨论】：

你为什么不做<button (click)="expandAllShips(flag)">(areShipsExpanded$ | async ? "Collapse" : "Expand" </button>

(click)="expandAllShips(flag) 因为那个？

为什么不在组件中订阅areShipsExpanded$并将其分配给flag属性？

当然可以，但我想知道是否可以直接从异步中进行：)

这是***.com/a/40751358/2604813 的另一种方式 --

【参考方案1】：

使用来自@ngrx/component 的*ngrxLet 指令

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

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

【参考方案2】：

在这里聚会有点晚了，但我从medium article找到了一个很好的例子来说明如何做到这一点

你仍然使用*ngIf，但你确保它总是通过传入一个带有你的可观察值作为属性的新对象来评估真实。

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

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

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

【参考方案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>

DEMO