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

EN

id="item.id“和id=”{item.id}“都将输出相同的结果，因为这两种方法都可以将变量绑定到模板。[]使用约束正弦税和{} 迭代法。据我所知，这两种用途都可以，这取决于您的喜好。

另一方面，attr.id="id“可能会给您带来不同的结果。这将把变量id的值放到html的属性ID中。如果变量是id=1234。

<div [attr.id]="id"></div> => <div id="1234"></div>

但是，如果您有一个输入名为"id“的组件，如：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'hello-world',
  template: `<h1>Hello your ID is: {{id}}</h1>`,
  styles: [`h1 { font-family: Lato; }`],
})
export class HelloComponent {
  @Input() id: string;
}

使用attr.id与使用id不一样。

• id将填充名为"id“的组件的输入变量
• attr.id将定义HTML属性"id“

希望这能帮你解决问题。

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

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

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

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

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

一定要检查上面的链接以获得详细的用例，或者在相同的关于堆叠溢出的答案上。