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

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

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

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

Fateme Fazli 07.04.2019 12:56

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

Khurshid Ansari 07.04.2019 13:16

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

Fateme Fazli 07.04.2019 13:32

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

Fateme Fazli 07.04.2019 14:12

@FatemeFazli мы можем соединиться где-нибудь, если вы не возражаете

Khurshid Ansari 07.04.2019 14:36

Давайте продолжить обсуждение в чате.

Fateme Fazli 07.04.2019 14:41
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
6
807
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Для 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>

Можете ли вы выделить жирным шрифтом то, что вы улучшили в своем коде?

Khurshid Ansari 29.08.2019 15:41

Другие вопросы по теме