如何在 Angular 2 中添加条件属性? [英] How to add conditional attribute in Angular 2?
问题描述
如何有条件地添加元素属性，例如复选框的checked?
How can I conditionally add an element attribute e.g. the checked of a checkbox?
Angular 以前的版本有 NgAttr，我认为 NgChecked 似乎都提供了我所追求的功能.但是，这些属性在 Angular 2 中似乎不存在，我认为没有其他方法可以提供此功能.
Previous versions of Angular had NgAttr and I think NgChecked which all seem to provide the functionality that I'm after. However, these attributes do not appear to exist in Angular 2 and I see no other way of providing this functionality.
推荐答案
null 将其删除:
[attr.checked]="value ? '' : null"
或
[attr.checked]="value ? 'checked' : null"
提示:
属性 vs 属性
当添加此绑定的 HTML 元素没有绑定中使用的名称的属性时(在本例中为 checked)，并且没有 Angular 组件或指令应用于同一元素已检查 @Input();，则不能使用 [xxx]="...".
Hint:
Attribute vs property
When the HTML element where you add this binding does not have a property with the name used in the binding (checked in this case) and also no Angular component or directive is applied to the same element that has an @Input() checked;, then [xxx]="..." can not be used.
替代方案是 [style.xxx]="...", [attr.xxx]="...", [class.xxx]="..." 取决于您尝试完成的任务.
Alternatives are [style.xxx]="...", [attr.xxx]="...", [class.xxx]="..." depending on what you try to accomplish.
因为只有一个checked属性，而没有checked属性[attr.checked]="..." 是这种特定情况的正确方法.
Because <input> only has a checked attribute, but no checked property [attr.checked]="..." is the right way for this specific case.
一个常见的陷阱也是 [attr.xxx]="..." 绑定的值 (...) 总是em> 字符串化.只有属性和 @Input() 可以接收其他值类型，如布尔值、数字、对象……
A common pitfall is also that for [attr.xxx]="..." bindings the value (...) is always stringified. Only properties and @Input()s can receive other value types like boolean, number, object, ...
大多数元素的属性和属性是相连的并且具有相同的名称.
Most properties and attributes of elements are connected and have the same name.
当绑定到属性时，该属性也只从属性接收字符串化的值.
当绑定到属性时，属性会收到绑定到它的值(布尔值、数字、对象等)，而属性又是字符串化的值.
When bound to the attribute the property also only receives the stringified value from the attribute.
When bound to the property the property receives the value bound to it (boolean, number, object, ...) and the attribute again the stringified value.
属性和属性名称不匹配的两种情况.
Two cases where attribute and property names do not match.
- 错误同时添加for"Angular 2.0 模板中标签的属性
https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor(见描述的第一句
htmlFor属性反映了for的值-for可能不起作用，因为它是 C 或 JavaScript 中的关键字)
- Error while adding "for" attribute to label in angular 2.0 template
https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor (see the first sentence of the description
htmlFor property reflects the value of the for-forprobably didn't work because it's a keyword in C or JavaScript)
为什么 colspan 在 Angular 2 中不是已知的原生属性?
Angular 从那时起就发生了变化，知道这些特殊情况并处理它们，以便您可以绑定到 <label [for]="，即使不存在这样的属性(对于 也是如此)colspan)
Angular was changed since then and knows about these special cases and handles them so that you can bind to <label [for]=" even though no such property exists (same for colspan)
这篇关于如何在 Angular 2 中添加条件属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
