Angular 2 - ngFor-Iteration -> click-event funktioniert nicht bei single Array-Entry von ngFor

Question

Ich habe ein Array mit definierten Antworten für eine Umfrage-Frage im Datenmodell in component.ts des entsprechenden Templates. Das Template-Rendering für einen <li> -Tag für jede Antwort (in Array) mit Iteration dieses Array via * ngFor-Directive funktioniert super.

Jetzt mag ich für JEDEN diese <li> -Tags (Multiple-Wahl Antwort) einem Click-Ereignis für Toggle einen aktiven Zustand implementieren.

Die folgende Markup macht alle Elemente des Array (alle Antworten) aktiv, NICHT nur die einzige li-Tag, die ich geklickt habe. Das ist mein Problem, auf das ich mich mit der Unterstützung der Community freue.

HTML-Vorlage

<ul> 
    <li *ngFor="let answer of questions.quest_1.answers, let i=index;" (click)="isActive = !isActive" [ngClass]="{'active': isActive}">{{answer}}</li> 
</ul> 

relevante Bauteil-Code

questions = { 
quest_1: { 
quest: 'my question...', 
answers: ['answer A', 'answer B', 'answer C', 'answer D'], 
},} 

für Knebel:

isActive: boolean = false; 

Ich habe versucht, den Index für Click-Ereignis in HTML umzusetzen aber es tut es nicht Vielen Dank im Voraus

Answer 1

, wenn Sie für Implement a click-event for toggle an active-state for EACH of this <li>-tag möchten Sie müssen Sie Array ändern, zum Beispiel eine Eigenschaft aktiv zu jedem Punkt Einstellung:

questions = { 
quest_1: { 
    quest: 'my question...', 
    answers: [ 
    {text: 'answer A', active: false}, 
    {text: 'answer B', active: false}, 
    {text: 'answer C', active: false}, 
    {text: 'answer D', active: false} 
    ], 
} 
} 

und für den HTML-Code:

<ul> 
    <li *ngFor="let answer of questions.quest_1.answers, let i=index;" (click)="answer.active = !answer.active" [ngClass]="{'active': answer.active}">{{answer.text}}</li> 
</ul> 

Answer 2

Martin Antwort ist fast in Ordnung, aber ich würde es ein wenig verbessern. Ich denke, dass es nur eine richtige Antwort geben wird, so wäre es besser, auf active nur die angeklickte einzustellen, während der Rest inactive bleiben wird.

this.questions.quest_1.answers.forEach(v => v.active = false);

Working plunker