Javascript 给动态 id Angular2 绑定
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36051195/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Give dynamic id Angular2 Binds
提问by user2924127
My JavaScript:
我的 JavaScript：
this.items = [
{name: 'Amsterdam1', id: '1'},
{name: 'Amsterdam2', id: '2'},
{name: 'Amsterdam3', id: '3'}
];
My HTML:
我的 HTML：
<ul>
<li *ngFor="#item of items" id={{item.id}}>
{{ item.name}}
</li>
</ul>
I want to assign a dynamic id to each element, but can't get it to work. The name is showing up but the id is not.
我想为每个元素分配一个动态 id，但无法让它工作。名称显示，但 ID 不显示。
回答by Angel Angel
the way you said works, Angular 2.0.0.beta.8.
你说的方式有效，Angular 2.0.0.beta.8。
in this case you can use for example:
在这种情况下，您可以使用例如：
[id]="item.id"[attr.id]="item.id"id={{item.id}}<ul> <li *ngFor="#item of items" #elem [id]="item.id"> {{ item.name}} ID: {{elem.id}} </li> </ul> <ul> <li *ngFor="#item of items" #elem [attr.id]="item.id"> {{ item.name}} ID: {{elem.id}} </li> </ul> <ul> <li *ngFor="#item of items" #elem id={{item.id}}> {{ item.name}} ID: {{elem.id}} </li> </ul>
[id]="item.id"[attr.id]="item.id"id={{item.id}}<ul> <li *ngFor="#item of items" #elem [id]="item.id"> {{ item.name}} ID: {{elem.id}} </li> </ul> <ul> <li *ngFor="#item of items" #elem [attr.id]="item.id"> {{ item.name}} ID: {{elem.id}} </li> </ul> <ul> <li *ngFor="#item of items" #elem id={{item.id}}> {{ item.name}} ID: {{elem.id}} </li> </ul>
Plunker
Plunker
You can look here for more information in Template syntax.
您可以在此处查看模板语法中的更多信息。
回答by Pardeep Jain
All the methods provided by @AngelAngel are correct but just to explain why to use [attr.id]posted as answer.
@AngelAngel 提供的所有方法都是正确的，但只是为了解释为什么使用[attr.id]发布作为答案。
Angular by default uses property binding. To tell Angular explicitly to use attribute binding, we use instead:
Angular 默认使用property binding. 为了明确告诉 Angular 使用属性绑定，我们改为使用：
<ul>
<li *ngFor="#item of items" #elem [attr.id]="item.id">
{{ item.name}} ID: {{elem.id}}
</li>
</ul>
With attr.idyou have to explicitly opt in to attribute binding because attribute binding is expensive. Attributes are reflected in the DOM and changes require for example to check if CSS selectors are registered that match with this attribute set. Property binding is JS only and cheap, therefore the default.
随着attr.id你对属性绑定必须明确的选择，因为属性绑定是昂贵的。属性反映在 DOM 中，更改需要例如检查是否注册了与此属性集匹配的 CSS 选择器。属性绑定只是 JS 并且便宜，因此是默认值。
回答by amazia
<ul>
<li *ngFor="#item of items" attr.id={{item.name}}>
{{ item.name}}
</li>
</ul>
This should work (worked for me on angular2).
这应该有效（在 angular2 上对我有用）。
回答by user2924127
I found the answer. I can use [attr.id] tag on the 'li' tag.
我找到了答案。我可以在“li”标签上使用 [attr.id] 标签。
