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]作为答案发布。

默认情况下，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

我找到了答案。我可以在＆＃39; li＆＃39;上使用[attr.id]标签。标签。

给动态id Angular2绑定

4 个答案:

`Plunker`