在 ionic 4 应用程序中仅启用一个复选框

Question

我试图在 ionic 4 应用程序中只启用一个复选框，我已经开始编写一些代码，但现在我卡住了，我想我必须使用 ngModel.. 我想在检查时将 reponse.checked 更改为正确，然后对我的数组的所有其他检查给出 false ...

html

  <ion-card>
    <ion-card-title>
      Question 1
    </ion-card-title>
      <ion-card-subtitle>
        Test
      </ion-card-subtitle>
        <ion-list>
              <ion-item *ngFor='let rep of reponse'>
                <ion-label>{{rep.name}}</ion-label>
                  <ion-checkbox 
                  [(ngModel)]="isChecked"
                  color="primary" 
                  slot="start"></ion-checkbox>
              </ion-item>
          </ion-list>
  </ion-card>

.ts

export class SurveyPage implements OnInit {

reponse = [
  {
    name: 'test',
    checked: false
  },
  {
    name: 'test2',
    checked: false
  },
];

  constructor() { }

  ngOnInit() {

  }

isChecked( {

});

}

Answer 1

您可以使用 ngModelChange 重置其他所选项目

<ion-item *ngFor='let rep of reponse;let i = index'>
         <ion-label>{{rep.name}}</ion-label>
           <ion-checkbox 
                  [(ngModel)]="rep.checked"
                  color="primary" 
                  (ngModelChange)="updatedCheckList(i)"
                  slot="start">
           </ion-checkbox>
</ion-item>

更新了 CheckList 方法

updatedCheckList(itemIndex:number) {
   this.reponse.forEach((rep,index) =>{
     if (itemIndex !== index) {
       rep.checked = false
     }
    })
}

demo

在 ionic 4 应用程序中仅启用一个复选框

enable only one checked box in ionic4 app

angular

ionic4