时间戳

首页 > 解决方案 > Ionic3 - 如何更新动态 ngModel 的值？

angular - Ionic3 - 如何更新动态 ngModel 的值？

问题描述

我正在使用 ionic 3 框架。如何更改 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.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>

任何人都可以有想法吗？

标签： angularionic-frameworkionic3

解决方案

ion-toggle 需要一个布尔值，如果将其绑定到布尔值，它将起作用。在您的 allRecs 模型属性中是字符串，因此初始值不会影响 ion-toggle 并且无法更改它。所以 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>

推荐阅读