表定义上的 ng-class 未解析答案

【问题标题】：ng-class on table definition not resolving表定义上的 ng-class 未解析
【发布时间】：2018-03-16 22:20:43
【问题描述】：

Angular 4 应用程序：

我有一个模型列表，我查看这些模型以使用 *ngFor 创建一些表行。每个模型都有一个包含一些字符串的列表：

{
  ...,
  changes:
  [
    'Test1',
    'Test2'
  ]
}

示例表和*ngFor如下：

<table>
   <tr>
     <th>...</th>
         ...
   </tr>
   <tr *ngFor="let item of list">
        <td ng-class="'cell-changed' : item.changes.indexOf('Test1') !== -1"> 
          {{item?.test1}}</td>
        <td ng-class="'cell-changed' : item.changes.indexOf('Test5') !== -1"> 
          {{item?.test2}}</td>

   </tr>
</table>

这应该做的是，对于每个表定义，都需要检查每个项目的更改列表以查看它是否存在。如果是这样，我希望应用该样式，否则不会发生任何事情。我在研究时看到的几个例子只是简单地说明了我上面的内容，但这不起作用。

我已经直接在 javascript 中进行了测试，以查看列表中的值是否符合我的预期并且我得到了正确的结果。我也简单地使用类属性访问了该类

<td class='cell-changed'>...</td>

这意味着它可以看到我的 css 类。

我也试过这样：

ng-class="item.changes.indexOf('Test1') !== -1 ? 'cell-changed' : ''"

虽然这没有引发错误，但它也不起作用。我错过了什么？

【问题讨论】：

标签： angular html-table ng-class

【解决方案1】：

您正在混合使用 AngularJS 和 Angular 方法。如果您使用的是 Angular 2+，则应使用 [ngClass] 代替：

<td [ngClass]="{'cell-changed': item.changes.indexOf('Test5') !== -1}"> 
    {{item?.test2}}
</td>

【讨论】：

感谢您的澄清和帮助。这非常有效！ TY

【解决方案2】：

ng-class 在 Angular 中不存在。这是一个 AngularJS 指令。

最干净的方法是这样做：

[class.cell-changed]="item.changes.indexOf('Test1') !== -1"

【讨论】：