在角度 5 中通过三元运算符设置复选框的选中属性

Question

在我的组件中，我有一个复选框，例如

<div class="checkbox checkbox-primary">
<input id="approved" name="approval" type="checkbox" (change)="clickEvent($event)" 
[checked]="Model.IsApproved =='Yes'?true:false">
<label for="approved">Approved /label>
</div>

IsApproved 是我的客户端模型中字符串类型的属性，它包含 Yes 或 No。

我想将其设置为选中，如果"已批准"为"是"，否则"未选中"。

我在下面尝试了组合

[checked]="IsApproved ===Yes?'true':'false'"
[checked]="IsApproved ==Yes?'true':'false'"
[checked]="IsApproved =='Yes'?true:false"
[checked]="{{IsApproved ===Yes?'true':'false'}}"

但是这里似乎什么都行不通，三元运算符可能吗？

Answer 1

我创建了一个工作堆栈闪电战，以便可视化答案。

正如注释中已经说过的，[checked]="Model.IsApproved === 'Yes' ? true : false"是正确的语法。似乎您的Model.IsApproved设置不正确。我在带有type="text"的input中使用[(ngModel)]设置了它：

元件：

Model = {
IsApproved: ''
};

视图：

<input type="text" name="approved" [(ngModel)]="Model.IsApproved">
<div class="checkbox checkbox-primary">
<input id="approved" name="approval" type="checkbox" (change)="clickEvent($event)" [checked]="Model.IsApproved === 'Yes' ? true : false">
<label for="approved">Approved</label>
</div>

在上面的输入中输入Yes并查看它是否正常工作。祝你好运！

Answer 2

只需使用这个

[checked]="Model.IsApproved =='Yes'"

仍然不工作？

您可以通过以下方式解决问题 -

1. 您是否收到任何未定义的错误？如果没有，请转到后续步骤，否则检查错误。
2. 您要引用的对象Model吗？
3. 财产IsApproved名称是否正确？
4. 属性IsApproved值为"是"还是"否">
5. 检查区分大小写的值。是Yes还是yes还是YES.

就是这样。

Answer 3

TS

public isChecked:boolean

根据条件分配真或假

.HTML

<label>Checkbox</label>
<input type="checkbox" [checked]="isChecked" />

Answer 4

如果你把

[checked]="Model.IsApproved.toLowerCase() === 'yes'

它将返回真或假，您根本不需要三元运算