如何将复选框绑定到Angular7中的字符串值？答案

【问题标题】：How to bind checkbox to string value in Angular7?如何将复选框绑定到Angular7中的字符串值？
【发布时间】：2020-01-26 12:20:03
【问题描述】：

<input pInputText type="checkbox" [(ngModel)]="rowData.active"> active 是一个字符串。它的值是“真”或“假”。我想将此字符串值绑定到一个复选框。那我该怎么做呢？

【问题讨论】：

不能在绑定值之前解析一下吗？如果后端需要它，请在发送到 API 之前再次解析它。

标签： html angular checkbox

【解决方案1】：

您需要在 HTMLElement 中添加 binary="true" 属性。

据我了解，您使用的是primeng 的复选框。所以代码应该是这样的-

<p-checkbox [(ngModel)]="rowData.active" binary="true"></p-checkbox>

有关详细信息，请在此处阅读整个文档 -

https://www.primefaces.org/primeng/#/checkbox

【讨论】：

不是primeng复选框。只需 .
你为什么要这样使用？不确定你的意图。用户p-checkbox 或普通输入类型文本。

【解决方案2】：

不使用“香蕉语法”

<input type="checkbox" 
  [ngModel]="rowData.active=='true'?true:false"
  (ngModelChange)="rowData.active=$event?'true':'false'"
>

【讨论】：

您可以将以下行简化： [ngModel]="rowData.active=='true'?true:false" 为 [ngModel]="rowData.active == 'true'"
@Victoria 你说得对，谢谢建议

【解决方案3】：

如果使用<input type="checkbox">，那么可以使用如下语法进行绑定：

<input
    type="checkbox"
   [checked]="(rowData.active === 'true') ? true : false"
   (change)="rowData.active = $event.target.checked"
/>

<p> rowData.active {{ rowData.active }}</p>

打字稿：

rowData = {active: 'true'};

【讨论】：

【解决方案4】：

在html中

<input type='checkbox' [(ngModel)]='rowData.active'>

在ts中

 rowData={'active' : true}

工作StackBligz

如果您使用primeng，请参考PrimeNg

【讨论】：