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一旦它从订阅中解析为值,您可以使用an 来获取对主题值的引用,如下所示:

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

演示