使用 [(ngModel)] 将 <mat slide toggle> 与 HTML 中的字符串值绑定答案

【问题标题】：Bind <mat slide toggle> using [(ngModel)] with a string value in HTML使用 [(ngModel)] 将 <mat slide toggle> 与 HTML 中的字符串值绑定
【发布时间】：2019-05-17 15:44:37
【问题描述】：

我有一个材质幻灯片切换按钮，它是使用 [(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

【问题讨论】：

您可以创建 stackblitz 链接来重现该问题吗？看来你的数组本身有问题

标签： angular typescript angular-material

【解决方案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'
   }
}

DEMO

【讨论】：

"attributes 是这样的对象数组 { "_id": "5bf7e1be80c05307d06423c2", "agentId": "awais", "attributes": [ { "name": "Marketing", "type "："布尔"，"值"："真"，}，{"名称"："英语"，"类型"："熟练度"，"值"："7"，}]，"__v"：0 }
@RazaEllahi 好的，我不需要知道属性是什么，只是尝试了一个示例，您可以放置自己的属性。
我得到一个错误，“无法读取未定义的属性'2'”，2 是索引值
哪一行导致错误？看来您正在使用 ngfor。
我在 html 中使用 *ngFor

【解决方案2】：

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

每次滑动切换改变它的时候都会触发一个事件价值。

你可以尝试添加：

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

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

【讨论】：

【解决方案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 类型，那么您可以在组件中使用 getter/setter，就像在这个 Stackblitz 中一样。

【讨论】：

变量的类型是严格的字符串，它不能被改变，因为有时一个字符串值必须存储在其中，如果我删除 ngModel 一切都很好，但是，我如何将它与变量。
关于删除[(ngModel)] 的部分只是为了展示您的[checked] 绑定确实有效。如果它必须是字符串类型，您可以在组件中使用 getter/setter，请参阅编辑后的答案。