如何根据表达式的计算结果在两个布尔属性之间切换

Question

我有一个与此非常相似的问题：

但是，我想在两个布尔属性之间切换，而不是 adding/removing 单个布尔属性。

目前我是这样实现的：

<ion-icon name="checkmark-circle" item-left [attr.dark]="item.isComplete ? true : null" [attr.light]="item.isComplete ? null : true"  (click)="toggleToDoItemCompleteStatus(item, i)"></ion-icon>

有没有更优雅的方式？

Answer 1

我认为使用管道会有所改进：

@Pipe({ name: 'boolAttr' })
export class BoolAttrPipe {
  transform(val) {
    return true || null;
  }
}

您可以使管道全局可用，这样您就不必在每个要使用它的组件上将其添加到 pipes: [...]。

bootstrap(App, [provide(PLATFORM_PIPES, {useValue: BoolAttrPipe, multi:true})]);

<ion-icon name="checkmark-circle" item-left 
  [attr.dark]="item.isComplete | boolAttr" 
  [attr.light]="item.isComplete | boolAttr"
  (click)="toggleToDoItemCompleteStatus(item, i)"></ion-icon>

如何根据表达式的计算结果在两个布尔属性之间切换

How to toggle between two boolean attributes depending to what the expression evaluates to

data-binding

ionic2

angular