Ионный флажок связывает два значения

Question

Я боролся с ионными флажками, и мне действительно нужна помощь. Я разрабатываю анкету, которая имеет истинные или ложные ответы. Я хочу, чтобы истина и ложь появлялись как ионные флажки. Примерно так:

 <ion-row>
 <ion-col size="1">
  <ion-checkbox [checked]="option1" (ionChange)=change1()>
  </ion-checkbox>
 </ion-col>
 <ion-col>True </ion-col>
 <ion-col size="1">
  <ion-checkbox [checked]="option2" (ionChange)=change1()>
  </ion-checkbox>
 </ion-col>
 <ion-col>False </ion-col>
</ion-row>

Я хочу, чтобы ionChange гарантировал, что только один флажок будет установлен как истинный одновременно. В других мирах, если пользователь выбирает true, флажок false (option2) автоматически станет false. Если кто-то может помочь, я был бы очень признателен.

Answer 1

Вот простой способ сделать это

https://stackblitz.com/edit/ionic-a51emq

Home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  avengers = {
    stark: true,
    steve: false
  }
  constructor(public navCtrl: NavController) {

  }
filterData(){

    this.avengers.steve = !this.avengers.steve
    this.avengers.stark = !this.avengers.stark

}
}

Home. html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-card padding>
  <ion-checkbox [checked]="avengers.stark" ([ngModel])='avengers.stark' (click)="filterData()"></ion-checkbox>  Stark
  </ion-card>  
  <ion-card padding>
  <ion-checkbox [checked]="avengers.steve" ([ngModel])='avengers.steve' (click)="filterData()">Stark</ion-checkbox>  Steve
  </ion-card>  

</ion-content>