Wie erzeugt man dynamisch ngModel mit * ngFor in Angular2?

Question

Das hat mich seit zwei Tagen verblüfft, wie man eine neue ngModel für jede neue Iteration innerhalb einer *ngFor Schleife hat? die Idee ist, dass ich eine Liste von Fragen zu laden, in jeder Frage, die ich 2 Sätze haben, hier ist die html

<div *ngFor="#qt of listQuestion"> 

<h3 class="uk-accordion-title" >{{qt.wordingQ}}</h3> 

<div class="uk-accordion-content"> 

<input type="checkbox" id="0" [(ngModel)]="selected" (Change)="cbChange($event)"/> 

<label for="0" class="inline-label" > <b>{{qt.lpo[0]}}</b></label><br> 

<input type="checkbox" id="1" [(ngModel)]="selected_1" (Change)="cbChange_1($event)"/> 

<label for="1" class="inline-label"><b>{{qt.lpo[1]}}</b></label><br> 


            </div></div> 

Dieses nur reibungslos funktionieren, wenn u eine Frage im listQuestion haben, wenn es mehr ist , einmal als eine Frage werde ich eine proposition (zB: lpo[0]) überprüfe die ersten Frage aller anderen ersten Sätze (erste, da der Index von lpo = 0) anderen Fragen wird Hier ist ein Bild, das das Problem ausgewählt werden:

Irgendwelche Hilfe bitte?

Answer 1

Es ist ziemlich einfach, müssen Sie sicherstellen, dass json enthält passendes true or false Feld, wie Sie mit checkbox umgehen werden.

Mit ngFor i ngModel wie auf diese Weise verwenden würde,

[(ngModel)]="qt.lpo[0]" //qt.lpo has to be true or false 
// Answer1, Answer2 you can manage separately 

[(ngModel)]="qt.lpo[1]" //qt.lpo creates new instance for each iteration of ngFor loop. 

Auf diese Weise schafft es unterschiedliche ngModel für die einzelnen Fragen. Aber Sie müssen sicherstellen, dass qt.lpo Feld sollte wahr oder falsch enthalten.

Answer 2

Jedes ngModel muss einer anderen Variablen zugewiesen werden. Dies ist in Ihrem Beispiel nicht der Fall, da Sie nur zwei Variablen verwenden (selected, selected_1). Objektorientierte Programmierung zur Rettung! Erstellen Sie eine neue Klasse Frage und eine neue Klasse Antwort. Die Frage sollte ein inneres Array von Antworten haben. Verwenden Sie dann zwei ngFors, um über Fragen und ihre Antworten zu iterieren.

export class Question { 
    public text:string; 
    public answers:Answer[]; 
} 

export class Answer{ 
    public text:string; 
    public selected:boolean; 
} 

<div *ngFor="let q of questions"> 
    {{q.text}} 
    <div *ngFor="let a of q.answers"> 
     <label><input type="checkbox" name="checkbox" [(ngModel)]="a.selected">{{a.text}}</label> 
    </div> 
</div> 

Sie können dann Fragen Array wie folgt initialisieren:

questions:Question[] = [ 
    { 
     text: "What do you want?", 
     answers: [ 
      { 
       "text": "Nothing", 
       "selected": false 
      }, 
      { 
       "text": "Something", 
       "selected": false 
      } 
     ] 
    } 
]; 

diese Weise können Sie ungerade Anzahl von Antworten haben können, wenn Sie

wollen