table 上的 ng-class 定义未解析

ng-class on table definition not resolving

Angular 4个申请:

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

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

样本table和*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>

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

我直接在 javascript 中进行了测试,以查看列表中的值是否符合我的预期,并且我得到了正确的结果。我还使用 class 属性

简单地访问了 class
<td class='cell-changed'>...</td>

这意味着它可以看到我的 css class.

我也这样试过:

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

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

您正在混合使用 AngularJS 和 Angular 方法。如果您使用 Angular 2+,则应使用 [ngClass] 而不是:

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

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

最干净的方法是做这样的事情:

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