Я использую ionic 3 framework. Как изменить значение ngModel? Я хочу программно переключать все ион-переключатели.
компонент:
allRecs:any;
constructor(){
this.allRecs = [
{
label: "label 1",
model : "model1"
},
{
label: "label 2",
model : "model2"
},
{
label: "label 3",
model : "model3"
}
]
}
public toggle(flag:boolean){
console.info(flag);
}
HTML:
<ion-item *ngFor = "let x of allRecs">
<ion-label> {{x.label}} </ion-label>
<ion-toggle [(ngModel)] = "x.model" (ionChange) = "toggle(x.model)" item-end>
</ion-toggle>
</ion-item>
Может у кого есть идея?
@FatemeFazli да, вы правы, но как я могу обновлять его динамически?
вы можете обновить свои allRecs, добавив еще один атрибут, например, { label: "label 3", model : "model3", value: false }
, затем измените ngModel на x.value .
Пожалуйста, я добавлю это как ответ.
@FatemeFazli мы можем соединиться где-нибудь, если вы не возражаете
Давайте продолжить обсуждение в чате.
Для ion-toggle требуется логическое значение, если вы привяжете его к логическому значению, оно будет работать. в вашем атрибуте модели allRecs есть строка, поэтому начальное значение не влияет на ионное переключение и не может его изменить. поэтому x.model должен быть логическим или добавить новый логический атрибут, например, для значения, чтобы установить его для ngModel:
constructor(){
this.allRecs = [
{
label: "label 1",
value: false
},
{
label: "label 2",
value: false
},
{
label: "label 3",
value: true
}
]
}
toggle(flag:boolean){
for(let i=0;i<this.allRecs.length;i++){
this.allRecs[i].value = flag;
}
}
в html:
<ion-item *ngFor = "let x of allRecs">
<ion-label> {{x.label}} </ion-label>
<ion-toggle [(ngModel)] = "x.value" (ionChange) = "toggle(x.value)" item-end>
</ion-toggle>
</ion-item>
Я попытался сделать, как в примере выше, но нуждается в некотором улучшении, как показано ниже.
constructor(){
this.allRecs = [
{
id: 1, //add this line
label: "label 1",
value: false
},
{
id: 2, //add this line
label: "label 2",
value: false
},
{
id: 3, //add this line
label: "label 3",
value: true
}
]
}
/*
* in this method added new parameter `id: number`
*/
toggle(id: number, flag:boolean) {
for(let i=0;i<this.allRecs.length;i++) {
//check if the current record has the same id
if (this.allRecs[i].id == id) {
this.allRecs[i].value = flag;
}
}
}
в html:
<!-- added new parameter `x.id` when occurs `ionChange` event calling toggle method -->
<ion-item *ngFor = "let x of allRecs">
<ion-label> {{x.label}} </ion-label>
<ion-toggle [(ngModel)] = "x.value" (ionChange) = "toggle(x.id, x.value)" item-end>
</ion-toggle>
</ion-item>
Можете ли вы выделить жирным шрифтом то, что вы улучшили в своем коде?
ion-toggle требуется логическое значение, если вы привяжете его к логическому значению, оно будет работать, например,
model : false
.