如何在表达式评估的情况下切换两个布尔属性

19 浏览
0 Comments

如何在表达式评估的情况下切换两个布尔属性

我有一个非常类似的问题：是否可以使用Angular2有条件地显示元素属性？

然而，我想在两个布尔属性之间进行切换，而不是添加/删除单个布尔属性。

目前我是这样实现的：

有没有更优雅的方式？

0

1 答案

0 Comments

问题的出现原因：使用三元运算符在模板中切换两个布尔属性的值，代码看起来不美观。

解决方法：使用管道来改善代码的可读性和维护性。将切换布尔属性的逻辑封装在管道中，然后在模板中使用管道来实现切换功能。可以将管道设置为全局可用，这样就不需要在每个组件中都添加管道。

文章内容如下：

我认为使用管道会改善代码的实现方式：

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

你可以将管道设置为全局可用，这样就不需要在每个组件中都添加管道。

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>

谢谢，但这已经是我正在做的。唯一的区别是，我将点击事件代码封装在toggleToDoItemCompleteStatus函数中。我想问的是"... [attr.dark]="item.isComplete ? true : null" [attr.light]="item.isComplete ? null : true" 这部分代码看起来不美观，是否有更好的写法。

谢谢。这绝对是一个改进。

0