时间戳

首页 > 解决方案 > Angular2中给出动态id方法的区别

javascript - Angular2中给出动态id方法的区别

问题描述

我的问题是这三种方法有什么区别：

哪种方法最好？

标签： javascriptangular

解决方案

您将需要知道属性和属性之间的区别

第一个是属性绑定，通常用于绑定到动态HTML 属性。它的正确用例是第一个示例[id]="item.id"，其中 HTML 属性是 ID

第三个是文本插值，通常用于“将动态字符串值合并到您的 HTML 模板中”。正确的用例应该是<p>Audi has sold {{totalCarsSold}} cars in 2021</p>, wheretotalCarsSold在你的组件中定义。尽管第三个也可以，但不建议在绑定 HTML 属性时使用。

然而，第二个是属性绑定。由于 Angular 使用属性绑定，它无法“理解”已绑定为属性的属性的作用。.attr因此，必须使用前缀来告诉 Angular 这是正在使用的属性。例如，在下面的动态进度条的情况下，

<div style="width: {{progress}}%" [attr.aria-valuenow]="progress"> {{progress}}% </div> 由于 aria 是一个属性，它必须以 为前缀.attr，否则 angular 会抛出错误Can't bind to 'aria-valuenow' since it isn't a known property of 'div'

请务必查看上面的链接以获取详细的用例，或者查看 stackoverflow上的这个答案

推荐阅读