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

Posted 2023-03-05

【中文标题】如何将复选框绑定到Angular7中的字符串值？

【英文标题】：How to bind checkbox to string value in Angular7?

【发布时间】：2020-01-26 12:20:03

【问题描述】：

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

【问题讨论】：

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

【参考方案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