如何有条件地添加元素属性，例如checked复选框的？
以前版本的 Angular 有NgAttr并且我认为NgChecked它们似乎都提供了我所追求的功能。但是，这些属性在 Angular 2 中似乎不存在，我认为没有其他方法可以提供此功能。
如何在 Angular 2 中添加条件属性？
IT技术
javascript
angular
2021-01-18 07:16:48
6个回答
null 删除它：
[attr.checked]="value ? '' : null"
或者
[attr.checked]="value ? 'checked' : null"
暗示：
属性 vs 属性
如果添加此绑定的 HTML 元素没有绑定中使用的名称的属性（checked在这种情况下），并且没有 Angular 组件或指令应用于具有 的同一元素@Input() checked;，则[xxx]="..."不能使用。
没有这样的属性时绑定什么
替代方案是[style.xxx]="..."，[attr.xxx]="..."，[class.xxx]="..."取决于您尝试完成的任务。
因为<input>只有一个checked属性，但没有checked属性[attr.checked]="..."是这种特定情况的正确方法。
属性只能处理字符串值
一个常见的缺陷还在于，对于[attr.xxx]="..."绑定，值 ( ...)始终是字符串化的。只有属性和@Input()s 可以接收其他值类型，如布尔值、数字、对象、...
元素的大多数属性和属性都是相连的并且具有相同的名称。
属性-属性连接
当绑定到属性时，该属性也只从属性接收字符串化的值。
当绑定到属性时，属性会收到绑定到它的值（布尔值、数字、对象等），而属性又是字符串化的值。
属性和属性名称不匹配的两种情况。
- 将“for”属性添加到 angular 2.0 模板中的标签时出错
https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor（请参阅说明的第一句
htmlFor property reflects the value of the for-for可能不起作用，因为它是 C 或 JavaScript 中的关键字）
从那时起，Angular 发生了变化，并且知道这些特殊情况并处理它们，以便<label [for]="即使不存在此类属性也可以绑定（对于colspan）
在 angular-2 属性语法中是
<div [attr.role]="myAriaRole">
将属性角色绑定到表达式 myAriaRole 的结果。
所以可以使用像
[attr.role]="myAriaRole ? true: null"
精炼 Günter Zöchbauer 回答：
这现在似乎不同了。我试图这样做是为了有条件地将 href 属性应用于锚标记。对于“不适用”的情况，您必须使用 undefined。作为示例，我将使用一个有条件地应用了 href 属性的链接进行演示。
--EDIT--看起来 angular 已经改变了一些东西，所以null现在可以按预期工作了。我已经更新了示例以使用null而不是undefined.
根据超链接规范，没有 href 属性的锚标记变为纯文本，指示链接的占位符。
对于我的导航，我有一个链接列表，但其中一个链接代表当前页面。我不希望当前页面链接是一个链接，但仍然希望它出现在列表中（它有一些自定义样式，但这个例子是简化的）。
<a [attr.href]="currentUrl !== link.url ? link.url : null">
我认为这比在跨度和锚标记上使用两个 *ngIf 更干净。它也非常适合向按钮添加禁用属性。
如果它是一个输入元素，您可以编写类似...
<input type="radio" [checked]="condition">的内容。条件的值必须为真或假。
同样对于样式属性...
<h4 [style.color]="'red'">Some text</h4>
你可以用这个。
<span [attr.checked]="val? true : false"> </span>