Question

我对此有一个非常相似的问题：Is it possible to conditionally display element attributes using Angular2?

但是，我想在两个布尔属性之间切换，而不是添加/删除一个布尔属性。

目前正在实现这一目标：

<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>

如何根据表达式求值的内容在两个布尔属性之间切换

1 个答案: