如何在Angular2中使用* ngFor動態生成ngModel？

這兩天以來一直讓我困惑，如何在*ngFor循環中每次新迭代都有新的ngModel？這個想法是，我加載的問題清單，每一個問題，我有2個命題中，這裏是HTML如何在Angular2中使用* ngFor動態生成ngModel？

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

這將順利工作僅如果u有一個問題在listQuestion，如果有更多的不是一個問題，有一次我會檢查proposition（如：lpo[0]）的第一個問題的所有其他第一命題（第一因爲lpo = 0指數）的其他問題將被選中這裏有一個照片，說明這個問題：

請幫忙嗎？

來源

2016-06-10 selem mn

它很簡單，你必須確保JSON包含適當的true or false字段，因爲您要處理checkbox。

隨着ngFor我會用ngModel像這樣，

[(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.

這樣，它會爲每個問題不同ngModel。但是您必須確保qt.lpo字段應包含true或false。

來源

2016-06-10 12:30:30 micronyks

每個ngModel需要分配給不同的變量。在您的示例中情況並非如此，因爲您只使用兩個變量（selected，selected_1）。面向對象的編程來拯救！創建新課堂問題和新課堂答案。問題應該有答案的內部數組。然後使用兩個ngFors遍歷問題及其答案。

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>

然後，您可以initalize問題數組是這樣的：

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

這種方式，您可以有奇數的答案，如果你想

來源

2016-06-10 12:14:21 Celebes

如何在Angular2中使用* ngFor動態生成ngModel？

回答

相關問題