Ionic3 - Как обновить значение динамического ngModel?

Question

Я использую ионный 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>

Может у кого-нибудь есть идея?

Answer 1

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>