angular - 使用 [(ngModel)] 与 HTML 中的字符串值绑定(bind)

Question

我有一个 Material 滑动切换按钮，它使用 [(ngModel)] 与值为“true”或“false”的字符串变量进行双向绑定(bind)，当我切换它时，按钮会正确更新变量的值，但是当它第一次加载到 DOM 中时，即使变量中的值为“false”，它也始终显示其状态为 true。

<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>

this is the result

Answer 1

您正在将字符串值绑定(bind)到需要 bool 值以进行检查的 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>

代码:

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

DEMO