绑定<垫幻灯片切换>使用 [(ngModel)] 和 HTML 中的字符串值

Question

我有一个材质滑动切换按钮，它使用[(ngModel(]与值为"true"或"false"的字符串变量双向绑定，当我切换时，按钮会正确更新变量的值，但当它第一次加载到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，该值需要为布尔值才能进行检查，因此将其更改为：

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

演示

Answer 2

代码的问题是[(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类型，那么您可以在组件中使用getter/setter，就像这个Stacklitz中一样。

Answer 3

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

每次幻灯片切换更改其价值

您可以尝试添加：

(change(="agent.attributes[i].value=！agent.attratutes[i].value">

如您所见：
https://stackblitz.com/edit/angular-b77drk?file=app/slide-toggle-configuratle-example.html