изменить класс на основе переключателя, установленного angular, используя ngfor, ngClass, ngChange

Question

<div>
<label *ngFor="let article of articles; let i = index" [ngClass]="{'is-valid': isChecked}">
<input type="radio" name="name" (change)="isChecked = true">
  input{{i}}
</label>

Здесь класс isChecked применяется для всех меток на основе ввода, но класс не удаляется, даже если я выбираю другой вариант.

Я пробовал этот способ, но он не удаляет класс, если вход не отмечен. отдельный ngClass в ngFor l oop, angular 6

Я создал пример slackblitz https://stackblitz.com/edit/angular-ngclass-ngfor-change

Заранее спасибо

Answer 1

Я обнаружил, что это решение работает.

https://stackblitz.com/edit/angular-ngclass-ngfor-change-m2d1hy

<div>
<label *ngFor="let article of articles; let i = index" [ngClass]="[article.isChecked ? 'is-valid' : 'is-notvalid']">
<input type="radio" name="name"  (change)="checked(i)" >
  input{{i}}
</label>

export class AppComponent  {
name = 'Angular';
articles = []
isChecked: boolean = false;
constructor(){
this.articles.push({ "isChecked" : false});
this.articles.push({ "isChecked" : false});
this.articles.push({ "isChecked" : false});
}
test= "";
checked(i){  
this.articles.forEach(x=> x.isChecked = false);
this.articles[i]['isChecked'] = !this.articles[i]['isChecked'];
}

}

Answer 2

Попробуйте следующее:

<div>
<label *ngFor="let article of articles; let i = index" [ngClass]="{'is-valid': !!article.isChecked}">
<input type="radio" name="name" (click)="article.isChecked = !article.isChecked">
  input{{i}}
</label>