Ionic2、Angular2：[(ngModel)] 用于离子复选框或 html 复选框？

Question

以下情况中的 [(ngModel)] 应该是什么，以便我可以在幻灯片中保留复选框的状态？我需要在 select 选中复选框时从一张幻灯片滑动到另一张幻灯片，但是当我单击上一张时，需要保留状态。

这是我的单选按钮。我只是将单选按钮代码更改为复选框，但它不是 working.So 我删除了 [value] 属性现在如果我 select 一个复选框，所有这些都被选中。

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

我将 selected 选择存储在一个名为 "answer" 的数组中。请参阅：有人能帮我吗？提前致谢。

Answer 1

我不确定是所有问题都应该使用复选框，还是只使用其中的一部分。我修改了之前的 plunker，将一些问题设置为 多项选择题 ，并将其余问题设置为 单选题 。请看一下 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>

Ionic2、Angular2：[(ngModel)] 用于离子复选框或 html 复选框？

Ionic2,Angular2: [(ngModel)] for ion-checkbox or html checkbox?

html

checkbox

ionic2

angular2-forms

persist