时间戳

首页 > 解决方案 > 编写 ngClass 条件的更好方法

javascript - 编写 ngClass 条件的更好方法

问题描述

我试图想出一种更简洁的方式来写这个条件：

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

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

标签： javascriptangulartypescript

解决方案

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

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

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

更新

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

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

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

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

推荐阅读