Ionic 3: Как сделать так, чтобы переключатели вели себя как радио-кнопка

Question

У меня есть список флажков, и я хочу, чтобы они вели себя как радио-кнопка Как я могу это сделать?

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

Вот мой код:

selectOption(name, isChecked) {
    if (isChecked === true) {
      this.selectednames.push(name);
    } else {
      let index = this.removeCheckedFromName(name);
      this.selectednames.splice(index, 1);
    }
  }
  removeCheckedFromName(names: String) {
    return this.selectednames.findIndex((ref) => {
      return ref === names;
    });
  }

в моем HTML

<ion-list>
      <ion-list-header>
        Choose Your Team
      </ion-list-header>

      <ion-item *ngFor="let names of name; let i = index">
        <ion-label>{{name}}</ion-label>
        <ion-checkbox item-left color="secondary" formControlName="name"
          (ionChange)="selectOption(name, $event.checked)">
        </ion-checkbox>
      </ion-item>
    </ion-list>

Любые советы высоко ценится

Answer 1

checkbox-stovr.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>checkbox-stovr</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-list-header>
      Choose Your Team
    </ion-list-header>

    <ion-item *ngFor="let name of names; let i = index">
      <ion-label>{{ name['name'] }}</ion-label>
      <ion-checkbox [(ngModel)]="name['isChecked']" (click)="toggle(name)">
      </ion-checkbox>
    </ion-item>
  </ion-list>
</ion-content>

CheckboxStovrPage

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-checkbox-stovr',
  templateUrl: './checkbox-stovr.page.html',
  styleUrls: ['./checkbox-stovr.page.scss'],
})
export class CheckboxStovrPage implements OnInit {


  names = [{ name: 'a' }, { name: 'b' }, { name: 'c' }, { name: 'd' },];
  public selected: string;
  constructor() { }

  ngOnInit() {
  }

  public toggle(selected) {
    for (let index = 0; index < this.names.length; index++) {
      if (this.names['name'] != selected['name'])
        this.names[index]['isChecked'] = null;
    }
  }



}

Answer 2

Вы хотите, чтобы за раз выбиралось только одно значение?