離子複選框或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>