Question

我正在尝试通过ngClass内的索引传递ngFor来激活正确的类。我尝试了不同的方法，但没有成功。

代码如下：

<td *ngFor="let cell of row; let i = index" [ngClass]="{'col-tb-1-active' : classFocus.col1 , 'col-tb-1' : !classFocus.col1}">{{ cell.value }}</td>

在这种情况下，它的值为“ 1”，我想更改索引。会是这样的：

<td *ngFor="let cell of row; let i = index" [ngClass]="{'col-tb-1-active' : classFocus.col1 , 'col-tb-1' : !classFocus.col1}">{{ cell.value }}</td>

我尝试过这种方法，但是没有用：

<td *ngFor="let cell of row; let i = index" [ngClass]="{'col-tb-' + i + '-active' : 'classFocus.col' + i , 'col-tb-' + i : !'classFocus.col'+ i}">{{ cell.value }}</td>

Answer 1

尝试一下

<td *ngFor="let cell of row; let i = index" [ngClass]="{'col-tb-' +{{ i }}+ '-active' : 'classFocus.col' + {{i }}, 'col-tb-' +{{ i }}: !'classFocus.col'+{{ i}}}">{{ cell.value }}</td

Answer 2

我相信您会遵循以下条件：

<td *ngFor="let cell of row; let i = index" [class]="'col-tb-' + i + (classFocus['col' + i] ? '-active' : '')">{{ cell.value }}</td>

Answer 3

您可以通过以下方式尝试：

我也提供了 Stackblitz Demo 供您参考。

避免，将其作为 classFocus.col + i ，因为它不会将其视为包含数据的变量。
     如果需要动态className及其条件，请
将放在方括号[] 中

使用条件三元运算符（？）处理两个可能导致对错的条件

 <td *ngFor="let item of list; let i = index"
     [ngClass]="[classFocus['col' + i] ? 
                'col-tb-' + i + '-active' : 'col-tb-' + i]">
   {{ item }}
 </td>

Answer 4

<ng-container *ngFor="let item of list; let i = index">
    <tr [class]="'col'+i">{{item}}</tr>
</ng-container>

如何在ngClass中传递ngFor索引

4 个答案: