ngFor循环中的单个ngClass，角度为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

不是在全局范围内定义“ wrongArticle”。尝试在文章行中使用'wrongArticle'属性。我已经创建了一个工作示例应用程序stackblitz

这是ts代码

f

这是html代码

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

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