Получение статуса флажков в случае динамического списка в 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;
}