Dev Faq
0
votes

Comment passer NgFor Index dans NgClass

J'essaie de passer la NGFOR avec index à l'intérieur de NgClass pour activer la classe correcte. J'ai essayé différentes manières, mais je n'ai pas réussi.

Voici le code: p> xxx pré>

Dans ce cas, où il a "1", je veux changer l'index. Serait quelque chose comme: p> xxx pré>

J'ai essayé de cette façon, mais cela n'a pas fonctionné: P> 

<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>

1 commentaires

Je suppose que votre code ne fonctionnera pas car ClassFocus est une variable non une chaîne. Convertissez la variable en une matrice et y accédez quelque chose comme ClassFocus [i] .col. Le repos est bien

4 Réponses :

0
votes

Essayez ceci

{{cell.value}}

0 commentaires
1
votes

Je pense que vous êtes après les suivants: 

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

0 commentaires
0
votes

Vous pouvez l'essayer de cette façon:

J'ai fourni un Stackblitz Demo pour votre référence aussi.

éviter l'avoir comme classfocus.col + i , car il ne le traiterait pas comme une variable avec des données à ce sujet.

enfermez dans un support [] si vous voulez un nom de classe dynamique et son état

Utilisez opérateur ternaire conditionnel (?) Lorsque vous traitez avec 2 conditions qui pourraient résulter de vrais ou faux xxx

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

Articles qui pourrait vous intéresser :

Erreur de compilation angulaire: NG6001: la classe est répertoriée dans les déclarations du NgModule 'AppModule', mais n'est pas une directive, un composant ou un tube
Changer le format numérique du champ d'entrée dans le mode d'édition de ligne de table d'Antd?
La description n'est pas une exception définie sur Typescript, Mocha et VSCode
Impossible de trouver le module défini dans tsconfig `chemins`