我的JavaScript:
this.items = [
{name: 'Amsterdam1', id: '1'},
{name: 'Amsterdam2', id: '2'},
{name: 'Amsterdam3', id: '3'}
];
我的HTML:
<ul>
<li *ngFor="#item of items" id={{item.id}}>
{{ item.name}}
</li>
</ul>
我想为每个元素分配动态ID,但不能让它工作。名称显示但id不是。
答案 0 :(得分:36)
你说的方式有效,Angular 2.0.0.beta.8。
在这种情况下,您可以使用例如:
[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>
您可以在此处查看模板语法中的更多信息。
答案 1 :(得分:11)
@AngelAngel提供的所有方法都是正确的,只是为了解释为什么使用[attr.id]
作为答案发布。
默认情况下,Angular使用property binding
。要明确告诉Angular使用属性绑定,我们使用:
<ul>
<li *ngFor="#item of items" #elem [attr.id]="item.id">
{{ item.name}} ID: {{elem.id}}
</li>
</ul>
使用attr.id
,您必须明确选择属性绑定,因为属性绑定很昂贵。属性反映在DOM中,并且更改需要例如检查是否注册了与此属性集匹配的CSS选择器。属性绑定仅限JS且便宜,因此是默认值。
答案 2 :(得分:4)
<ul>
<li *ngFor="#item of items" attr.id={{item.name}}>
{{ item.name}}
</li>
</ul>
这应该有效(在angular2上为我工作)。
答案 3 :(得分:1)
我找到了答案。我可以在&#39; li&#39;上使用[attr.id]标签。标签。