angular - Angular2：如何处理异步管道和条件样式？

Question

我期待根据其值将一些异步接收的数据着色为绿色或红色。

为了处理竞争条件，我使用了一个主题，它广播一个包含我感兴趣的数据的对象。

我成功地做了我想做的事，但生成的代码很丑：

<span [ngClass]="{greenClass: isPositive((mySubject | async)?.fieldData), redClass: !isPositive((mySubject | async)?.fieldData)}"> {{(mySubject | async)?.fieldData | number:'1.0-1' }} </span>

有没有更好的方法来解决这个问题？我试图在 ngClass 中添加一个三元表达式，但没有成功。将代码移回我的控制器是不行的，因为它会立即创建十个变量。

Answer 1

一旦它解析为来自订阅的值，您可以使用 an*ngFor来获取对主题值的引用，如下所示：

<span *ngFor="let subject of [(mySubject | async)]"
      [ngClass]="{greenClass: isPositive(subject?.fieldData), redClass: !isPositive(subject?.fieldData)}">
    {{subject?.fieldData | number:'1.0-1' }}
</span>

演示