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

Question

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

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

我成功地做了我想做的事，但结果代码很丑:

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

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

Answer 1

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

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

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

Angular2 : How to handle async Pipe and conditional styling?

subject

angular-pipe

angular

Demo