ngFor 循环中的单个 ngClass，角度 6

Question

I am trying to change the class of a specific position in my *ngFor, for example:

HTML

<table>
 <tr *ngFor="let article of articles; let i = index">
  <td>
    <input type="text" name="name" [(ngModel)]="articles[i].name" [ngClass]="{'is-valid': wrongArticle == false }" (change)="checkArticle(i)" >
  </td>
 </tr>
</table>

TS

articles = [{name: ""}, {name: ""}, {name: ""}]
wrongArticle: boolean = true;

 checkArticle(i){
  if(this.articles[i].name != ""){
  this.wrongArticle = false;
  }
 }

So... my problem is... when i type something in any input... the class 'is-valid' is applied in every input... how can i apply 'is-valid' just in the correct input?

Answer 1

Instead of defining 'wrongArticle' globally. try to use 'wrongArticle' property in the article row. I have created a working sample application stackblitz

Here is the ts code

 articles = [{name: ""}, {name: ""}, {name: ""}]
wrongArticle: boolean = true;

 checkArticle(article:any){
  if(article.name != ""){
  article.wrongArticle = false;
  }
 }

here is the html code

<table>
 <tr *ngFor="let article of articles; let i = index">
  <td>
    <input type="text" name="name" [(ngModel)]="articles[i].name" [ngClass]="{'is-valid': article.wrongArticle == false }" (change)="checkArticle(article)" >
  </td>
 </tr>
</table>