включить только один отмеченный флажок в приложении ionic4

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>

updatedCheckList метаданных

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

демо ??