привязыватьиспользование [(ngModel)] со строковым значением в HTML

Question

У меня есть кнопка переключения слайдов материала, и она имеет двухстороннее связывание со строковой переменной, имеющей значение "true" или "false", используя [(ngModel)], кнопка корректно обновляет значение переменной, когда я ее переключаю,но в первый раз, когда он загружается в DOM, он всегда показывает свое состояние в true, даже если значение в переменной равно «false».

<div *ngIf="agent.attributes[i].type == 'Boolean'">
  <mat-slide-toggle [checked]="agent.attributes[i].value == 'true' ? true : false" 
                  [(ngModel)]="agent.attributes[i].value">{{agent.attributes[i].value}}</mat-slide-toggle>
                </div>

это результат

Answer 1

Проблема с вашим кодом заключается в том, что ваша привязка [(ngModel)] перезаписывает привязку [checked].Удалите привязку [(ngModel)], и вы увидите, что привязка [checked] работает просто отлично.

Поскольку ваше свойство value является строкой со значением 'false' или 'true', привязка [(ngModel)] в обоих случаях оценивает это как истинное.

В идеале ваше value свойство будет boolean.Почему это должна быть строка?

С таким свойством, как boolean, можно даже избавиться от привязки [checked], например, так:

<div *ngIf="agent.attributes[i].type == 'Boolean'">
  <mat-slide-toggle [(ngModel)]="agent.attributes[i].value">{{agent.attributes[i].value}}</mat-slide-toggle>
</div>

Если это необходимобыть типа string, тогда вы можете использовать метод получения / установки в вашем компоненте, как в этом Stackblitz .

Answer 2

Я попробовал здесь с примером немного по-другому, но я надеюсь, что это поможет вам.
Согласно документации:
https://material.angular.io/components/slide-toggle/api
Этот компонент имеет свойство Output с именем change wich:

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

Вы можете попытаться добавить:

(change) = "agent.attributes [i] .value =! agent.attributes [i] .value "

Как вы можете видеть здесь:
https://stackblitz.com/edit/angular-b77drk?file=app/slide-toggle-configurable-example.html

Answer 3

вы привязываете строковое значение к ngModel, который должен быть логическим для проверки, поэтому измените его на:

<div>
  <mat-slide-toggle 
      [checked]="agent.attributes[i].value === 'true' ? true : false"
      (change)="setValue( i , $event )">
      {{agent.attributes[i].value}}
  </mat-slide-toggle>
</div>

ts код:

setValue(i , e){
    if(e.checked){
        this.agent.attributes[i].value = 'true'
   }else{
        this.agent.attributes[i].value = 'false'
   }
}

DEMO