在Angular2中獲取動態列表中的複選框狀態

Question

這一直讓我感到莫名其妙;我工作的一個Angular2應用程序，我已經與連接到每個單獨的問題，一個checkbox問題清單，它看起來像這樣的問題是，名單是動態增加，所以一旦我添加了一個問題，它會顯示它使用ngFor所示，這裏是代碼：

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

       <span class="md-card-list-item-date">20 Jul</span> 
       <div class="md-card-list-item-select"> 
       <input type="checkbox" [(ngModel)]="theCheckbox" (Change)="addQues($event)"/> </div> 

       <div class="md-card-list-item-subject"> 
        <span>{{qt.wordingQ}}</span> 
           </div> 
</li> 

凡wordingQ是包含問題措辭Question對象的參數。因此，對於每一個問題補充它會創建一個ngModel其中，如果分配給相同的變量（theCheckbox）和這裏的問題發生，因爲當我想查一個問題，所有其他問題將被選中，反之亦然，因此，我不能檢查每個問題的獨立狀態，因爲它是一個動態列表而非靜態列表。你們能幫我嗎我是新來的Angular2我如何創建一個獨特的ngModel - 可能 - 每個問題或有任何相關的解決方案嗎？ 在此先感謝..

Answer 1

我建議建立對每個問題的組件。然後每個問題都有自己的範圍，您可以在其中添加將模型連接到每個問題的複選框。

<li *ngFor="#qt of listQuestion"> 
    <question [question]="qt"></question> 
</li> 

question.ts

@Component({ 
    selector: 'question', 
    template: ’ 
      <span class="md-card-list-item-date">20 Jul</span> 
      <div class="md-card-list-item-select"> 
      <input type="checkbox" [(ngModel)]="theCheckbox" (Change)="addQues($event)"/> </div> 
      <div class="md-card-list-item-subject"> 
      <span>{{question.wordingQ}}</span> 
      </div>’ 
}) 

export class QuestionComponent { 
    @Input() question:any; 
    theCheckbox: boolean; 
}