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

#angular #ionic-framework #ionic3

Вопрос:

Я использую фреймворк ionic 3. Как изменить значение ngModel? Я хочу переключать все ion-переключать программно.

компонент:

 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>

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

1. для ion-toggle требуется логическое значение, если вы привяжете к нему логическое значение, оно будет работать, например model : false .

2. @FatemeFazli да, вы правы, но как я могу обновить его динамически?

3. вы можете обновить свои allRecs, добавив другой attr, например { label: "label 3", model : "model3", value: false } затем измените ngModel на x.value .

4. пожалуйста, я добавлю это в качестве ответа.

5. @FatemeFazli можем ли мы подключиться куда-нибудь, если вы не возражаете

Ответ №1:

ion-toggle требуется логическое значение, если вы привяжете его к логическому значению, оно будет работать. в вашем атрибуте allRecs model это строка, поэтому начальное значение не влияет на 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>

Ответ №2:

Я пытался сделать, как в примере выше, но нуждается в некотором улучшении следующим образом.

 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>