Question

我有一个素材滑动切换按钮，它使用[[ngModel）]与具有值“ true”或“ false”的字符串变量进行两种方式绑定，当我切换它时，该按钮会正确更新变量的值，但是，第一次将其加载到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

您正在将字符串值绑定到ngModel，该字符串值需要为布尔值才能进行检查，因此请将其更改为：

\n

ts代码：

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

DEMO

Answer 2

我在这里尝试的示例稍有不同，但希望对您有所帮助。
根据文档：
https://material.angular.io/components/slide-toggle/api
该组件具有一个名为change wich的Output属性：

每次滑动切换更改其事件时，都会调度一个事件值。

您可以尝试添加：

（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)]绑定正在覆盖[checked]绑定。删除[(ngModel)]绑定，您可以看到[checked]绑定可以正常工作。

由于您的value属性是一个值为'false'或'true'的字符串，因此在两种情况下，[(ngModel)]绑定都将其评估为true。

理想情况下，您的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中那样在组件中使用吸气剂/设置剂。

使用[（ngModel）]与HTML中的字符串值绑定<mat slide =“” toggle =“”>

3 个答案: