Angular 5 ngIfElse：将条件结果存储在变量中答案

【问题标题】：Angular 5 ngIfElse: Storing conditional result in a variableAngular 5 ngIfElse：将条件结果存储在变量中
【发布时间】：2018-01-31 06:52:18
【问题描述】：

代码：

<mat-icon [ngClass]='{ rotate: !users }'>refresh</mat-icon>
<div *ngIf="usersObservable | async as users; else loading">
  ...
</div>
<ng-template #loading let-users>
  Waiting...
</ng-template>

预期：rotate 类在用户加载时应用于<mat-icon>

结果：类未应用

问题：是否可以存储/使用 ngIfElse 评估的布尔结果？

P.S.：在本例中，我希望在 HTTP 请求完成之前将 rotate 类应用于 <mat-icon>。

【问题讨论】：

标签： angular angular-ng-if

【解决方案1】：

as users 变量仅在应用*ngIf 的标记上或内部的绑定范围内。

你会做类似的事情

<mat-icon [ngClass]='{ rotate: !(usersObservable | async)?.users }'>refresh</mat-icon>

确保您的 observable 在多次订阅时行为正常。比如What is the correct way to share the result of an Angular Http network call in RxJs 5?中提到的一些方法

【讨论】：

是的，这正是我想要的。但这对我来说很有趣 - 有没有更好的方法来做到这一点？我的意思是不使用 AsyncPipe 两次。
您可以在代码中进行订阅并将响应分配给subscribe(...) 中的字段，然后绑定到该字段。
这两种方式在效率上有什么区别？（如果存在）
取决于你如何实现它。使用显式 subscribe() 不太可能出错以导致 2 个服务器请求而不是 1 个。如果操作正确，我不会期望有显着差异。