индивидуальный ngClass в петле ngFor, угловой 6

Question

Я пытаюсь изменить класс определенной позиции в моем * ngFor, например:

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

Итак ... моя проблема в том, что ... когда я набираю что-то в любом входе ... класс is-valid применяется к каждому входу ... как я могу применить 'is-valid' только в правильный ввод?

Answer 1

Вместо того, чтобы определять «неправильный артикль» глобально. попытайтесь использовать свойство 'falseArticle' в строке статьи. Я создал рабочий пример приложения stackblitz

Вот код TS

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

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

вот HTML-код

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