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是客户端模型中string类型的属性，它包含Yes或No。

如果IsApproved为“是”，我想将其设置为“已选中”，否则为“未选中”。

我尝试了以下组合

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

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

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

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

但是这里似乎没有任何作用，三元运算符可能吗？

Answer 1

我创建了working stackblitz以便可视化答案。

如评论[checked]="Model.IsApproved === 'Yes' ? true : false"中所述，语法正确。好像您的Model.IsApproved设置不正确。我在[(ngModel)]的{{1}}内使用input进行设置：

组件：

type="text"

查看：

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>，然后查看它是否有效。祝你好运！

Answer 2

只需使用此

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

仍然无法正常工作吗？

您可以使用-

解决问题

您遇到任何未定义的错误吗？如果不是，则转到下一步，否则检查错误。
Model是您要引用的对象吗？
属性IsApproved的名称正确吗？
属性IsApproved的值为“是”或“否”
检查是否区分大小写。是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'

如果您根本不需要三元运算，它将返回true或false

在Angular 5

4 个答案:

只需使用此

仍然无法正常工作吗？