编写 ngClass 条件的更好方法

Question

我正在想一种更简洁的方式来写这个条件：

    [ngClass]="{
      'class1':
        image.isAvailable && (image.property !== true && !null),
      'class2':
        image.isAvailable && (image.property === true && !null)
    }"

所以 image.property 有时可能为 NULL，我正在尝试处理它......我知道我错过了一些明显的东西，但不知道是什么。非常感谢任何帮助

Answer 1

您可以将安全导航运算符?.与三元运算符一起使用。

[ngClass]="(image?.isAvailable && image?.property) ? 'class1' : 'class2'"

安全导航操作符会在尝试访问某个属性之前检查它是否已定义。

更新

OP 的要求 - 如果image?.isAvailable未定义，则不使用任何类。

您可以将三元运算符扩展到一个级别，以image?.isAvailable在应用类之前检查是否已定义。

[ngClass]="image?.isAvailable ? (image?.property ? 'class1' : 'class2') : ''"

''如果image?.isAvailable属性未定义，则空字符串表示空类列表。