Ionic3-如何更新动态ngModel的值? [英] Ionic3 - How to update value of dynamic ngModel?

问题描述

我正在使用离子3框架.如何更改ngModel的值?我想以编程方式切换所有离子切换.

I am using ionic 3 framework. How to change value of ngModel? I want to toggle all ion-toggle programmatically.

组件:

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.log(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>

任何人都有主意吗?

推荐答案

ion-toggle需要一个布尔值，如果将其绑定到一个布尔值，它将起作用. 您的allRecs模型属性中的字符串是字符串，因此初始值不会影响ion-toggle，也无法更改它.因此x.model应该为boolean或为值添加一个新的boolean属性，以将其设置为ngModel:

ion-toggle needs a boolean value, if you bind it to a boolean, it will work. in your allRecs model attribute is string so initial value not effects on ion-toggle and can't change it. so x.model should be boolean or add a new boolean attribute for e.g value to set it for 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>

这篇关于Ionic3-如何更新动态ngModel的值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！