Angular 5中ngClass结合条件判断的表格行代码技术咨询

看了你的代码，首先要指出你当前ngClass的写法存在问题，Angular并不会正确解析你写的条件表达式。下面一步步帮你梳理正确的用法：

问题根源 #

你现在写的是：

ngClass="device.onlineState == 'Offline' ? 'highlight' : 'highlight2'"

在Angular模板中，不带方括号的ngClass只是普通的字符串属性赋值，它不会把里面的三元表达式当成逻辑来计算，只会把整个字符串"device.onlineState == 'Offline' ? 'highlight' : 'highlight2'"当成类名加到元素上——这显然不是你想要的效果。

正确的写法 #

Angular提供了几种[ngClass]的绑定方式，针对你的场景推荐两种：

1. 三元表达式绑定（适合二选一的简单场景） #

用方括号包裹ngClass，把条件表达式写在里面：

<tr class="user-item" *ngFor="let device of group.devices" (click)="$event.stopPropagation()" 
    [ngClass]="device.onlineState === 'Offline' ? 'highlight' : 'highlight2'">

这里建议用===严格相等运算符，比==更严谨，避免类型转换带来的意外问题。

2. 对象字面量绑定（适合多状态扩展场景） #

如果以后需要给更多在线状态添加不同类名，这种方式可读性和扩展性更好：

<tr class="user-item" *ngFor="let device of group.devices" (click)="$event.stopPropagation()" 
    [ngClass]="{
        'highlight': device.onlineState === 'Offline',
        'highlight2': device.onlineState === 'Online'
    }">

对象的键是要添加的类名，值是布尔类型的条件表达式，当条件为true时，对应的类名就会被应用到元素上。

额外优化建议 #

看你代码里的<td>部分：

<td class="qkFix" *ngIf="device.onlineState == 'Online'" ngClass="colorOnline">

既然已经通过*ngIf判断只有在线状态才会渲染这个<td>，那colorOnline类名可以直接写在class属性里，不需要用ngClass，这样更简洁：

<td class="qkFix colorOnline">{{ device.onlineState }} <span class="dotOnline"></span></td>

如果以后需要基于其他条件动态添加类，再用[ngClass]的绑定方式就好。

内容的提问来源于stack exchange，提问作者idontunderstandarrays