复选框检查了 Angular2 的布尔值是否为真

2023-09-04前端开发问题
1

本文介绍了复选框检查了 Angular2 的布尔值是否为真的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

我想知道如何使用 Angular2 使复选框选中值是否为真,如果值为假则取消选中.

I would like to know how to make a checkbox checked if the value is true, and unchecked if false with Angular2.

Adult <input type="checkbox" value="{{person.is_adult}}">

{{person.is_adult}} 是一个 boolean

{{person.is_adult}} is a boolean

有人可以提出任何建议吗?谢谢

Can someone please suggest anything? Thanks

推荐答案

{{}} 做字符串插值和字符串化truefalseAngular 默认使用属性绑定,我假设属性需要布尔值而不是字符串:

{{}} does string interpolation and stringifies true and false and Angular by default uses property binding and I assume the property expects boolean values not strings:

<input type="checkbox" [checked]="person.is_adult">

这可能也有效

<input type="checkbox" attr.checked="{{person.is_adult}}">

因为使用属性绑定,浏览器可能会在将属性(只能是字符串)读取到其属性时将其转换为布尔值.

because with attribute binding the browser might translate it from the attribute (which can only be strings) to boolean when reading it into its property.

也是checked而不是value

你也可以使用ngModel

<input type="checkbox" [ngModel]"person.is_adult" name="isAdult">
<input type="checkbox" [(ngModel)]"person.is_adult" name="isAdult">

用于单向或双向绑定.
如果您使用 ngModel,请确保您已导入 FormsModule.

for one-way or two-way binding.
Ensure your have the FormsModule imported if you use ngModel.

这篇关于复选框检查了 Angular2 的布尔值是否为真的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

The End

相关推荐

layui 实现实时刷新一个外部的div
主页面上显示了一个合计,在删除和增加的时候需要更改这个总套数的值: //html代码div class="layui-inline layui-show-xs-block" style="margin-left: 10px" id="sumDiv"spanSOP合计:/spanspan${totalNum}/spanspan套/span/div 于是在我们删除这个条数据后,...
2024-11-14 前端开发问题
156

layui要如何改变时间日历布局大小?
问题描述 我想改变layui时间日历布局大小,这个要怎么操作呢? 解决办法 可以用css样式对时间日历进行重新布局,具体代码如下: !DOCTYPE htmlhtmlheadmeta charset="UTF-8"title/titlelink rel="stylesheet" href="../../layui/css/layui.css" /style#test-...
2024-10-24 前端开发问题
271

jQuery怎么动态向页面添加代码?
append() 方法在被选元素的结尾(仍然在内部)插入指定内容。 语法: $(selector).append( content ) var creatPrintList = function(data){ var innerHtml = ""; for(var i =0;i data.length;i++){ innerHtml +="li class='contentLi'"; innerHtml +="a href...
2024-10-18 前端开发问题
125

“数组中的每个孩子都应该有一个唯一的 key prop"仅在第一次呈现页面时
quot;Each child in an array should have a unique key propquot; only on first time render of page(“数组中的每个孩子都应该有一个唯一的 key prop仅在第一次呈现页面时)...
2024-04-20 前端开发问题
5

如何制作 TextGeometry 多线?如何将它放在一个正方形内,以便它像 html 文本一样包裹在 div 内?
How do I make a TextGeometry multiline? How do I put it inside a square so it wraps like html text does inside a div?(如何制作 TextGeometry 多线?如何将它放在一个正方形内,以便它像 html 文本一样包裹在 div 内?) - IT屋-程序员软件开发技术分享社...
2024-04-20 前端开发问题
6

AngularJS 错误:未知提供者:aProvider &lt;- a
AngularJS Error: Unknown provider: aProvider lt;- a(AngularJS 错误:未知提供者:aProvider lt;- a)...
2024-04-20 前端开发问题
11