У меня есть список флажков, и я хочу, чтобы они вели себя как переключатель Как я могу это сделать?
Я пытался использовать переключатель, но я не получаю значение пользовательского ввода, поэтому я отказался от идеи переключателя и реализации флажка, где я получаю правильное значение, и все идеально, кроме выбора нескольких флажков, которые я хочу удалить
Вот мой код:
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>
Любые советы высоко ценятся
Вы хотите выбрать только одно значение за раз??
Пожалуйста, проверьте и проголосуйте, если это отвечает на вопрос
флажок-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>
ФлажокStovrPage
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;
}
}
}
Я использую FormControl, поэтому не думаю, что смогу использовать [(ngModel)]
Да, сэр, и если пользователь выбирает другой, первый должен автоматически отменить выбор.