离子复选框或html复选框的Ionic2，Angular2：[（ngModel）]？

Question

在下面的情况下，[（ngModel）]应该如何，这样我可以保持幻灯片中复选框的状态？选择复选框后，我需要从一张幻灯片滑动到另一张幻灯片，但是当我点击之前的状态需要保持。

这是我为单选按钮。我只是将单选按钮代码更改为复选框，但它不起作用。因此，我删除了[value]属性，现在如果选择一个复选框，则所有这些都将被检查。

<ion-content padding> 

     <ion-slides> 
     <ion-slide *ngFor="let question of questions; let i = index"> 
      <h1>{{ question.text }}</h1> 
      <span *ngIf="question.type=='singlecorrect'> 
      <ion-list radio-group [(ngModel)]="question.answer"> 
      <ion-item no-lines no-padding *ngFor="let choice of question.choices"> 
       <ion-label>{{ choice.choiceText }}</ion-label> 
       <ion-radio [value]="choice"></ion-radio> 
      </ion-item> 
      </ion-list> 
      </span> 

      <span *ngIf="question.type=='singlecorrect'> 
      <ion-list checkbox-group [(ngModel)]="question.answer"> 
      <ion-item no-lines no-padding *ngFor="let choice of question.choices"> 
       <ion-label>{{ choice.choiceText }}</ion-label> 
       <ion-checkbox></checkbox> // ERROR : no value accessor found. 
      </ion-item> 
      </ion-list> 
      </span> 

      <ion-row margin-top> 
      <ion-col> 
       <button (click)="showPrevious()" ion-button text-only [disabled]="i === 0" >Previous</button> 
      </ion-col> 
      <ion-col> 
       <button [disabled]="!question.answer" *ngIf="i < questions.length - 1" (click)="showNext()" ion-button text-only >Next</button> 
       <button [disabled]="!question.answer" *ngIf="i === questions.length - 1" (click)="showNext()" ion-button text-only >Submit</button> 
      </ion-col> 
      </ion-row> 

     </ion-slide> 
     </ion-slides> 

</ion-content> 

我存储在一个名为“答案” .Refer这样的数组选中的选项：Angular2,Typescript: How to put the radio button checked when in an array which displays one element per page? 有人能帮助我吗？提前致谢。

Answer 1

我不确定是否所有问题都应该使用复选框，或者只是其中的一部分。我已经修改了前面的跳板，将一些问题设置为选择题，剩下的为单选题。请大家看看new version of the plunker

这是最终的结果：

在演示中，现在每个问题具有以下属性：

{ 
    text: 'Question 1', 
    multiple: false, 
    choices: [...], 
    answer: null 
    } 

如果问题允许有多个答案，那么answer属性用一个数组进行初始化，每个可用的选项都有一个项目。

// Initialize the answers 
this.questions.forEach(question => { 
    if(question.multiple) { 
    // Initialize an array with as many elements as the number of choices 
    question.answer = new Array(question.choices.length); 
    } 
}); 

然后在视图中我们渲染无线电项目或项目复选框相应：

<ion-slides> 
    <ion-slide *ngFor="let question of questions; let i = index"> 
     <h1>{{ question.text }}</h1> 

     <!-- Single choice: radio items --> 
     <div *ngIf="!question.multiple"> 
      <ion-list radio-group [(ngModel)]="question.answer"> 
      <ion-item no-lines no-padding *ngFor="let choice of question.choices"> 
       <ion-label>{{ choice.choiceText }}</ion-label> 
       <ion-radio [value]="choice"></ion-radio> 
      </ion-item> 
      </ion-list> 
     </div> 

     <!-- Multiple choice: checkbox items --> 
     <div *ngIf="question.multiple"> 
      <ion-item no-lines no-padding *ngFor="let choice of question.choices; let i = index"> 
      <ion-label>{{ choice.choiceText }}</ion-label> 
      <ion-checkbox [(ngModel)]="question.answer[i]"></ion-checkbox> 
      </ion-item> 
     </div> 


     <span style="font-size: 1.2rem;">Selected answer: {{ question.answer | json }}</span> 

     <ion-row margin-top> 
     <ion-col> 
      <button (click)="showPrevious()" ion-button text-only [disabled]="i === 0" >Previous</button> 
     </ion-col> 
     <ion-col> 
      <button [disabled]="!question.answer" *ngIf="i < questions.length - 1" (click)="showNext()" ion-button text-only >Next</button> 
      <button [disabled]="!question.answer" *ngIf="i === questions.length - 1" (click)="showNext()" ion-button text-only >Submit</button> 
     </ion-col> 
     </ion-row> 

    </ion-slide> 
    </ion-slides>