给动态id Angular2绑定

Question

我的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不是.

Answer 1

你说的方式有效,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>
  

Plunker

您可以在此处查看模板语法中的更多信息.

https://angular.io/guide/cheatsheet

Answer 2

@AngelAngel提供的所有方法都是正确的,只是为了解释为什么使用[attr.id]posted作为答案.

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而且便宜,因此是默认值.

Answer 3

<ul>
 <li *ngFor="#item of items" attr.id={{item.name}}>
  {{ item.name}}
 </li>
</ul>

这应该有效（在 angular2 上对我有用）。

Answer 4

我找到了答案。我可以在“li”标签上使用[attr.id]标签。