给动态id Angular2绑定

时间:2016-03-17 03:33:52

标签: javascript angular

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

4 个答案:

答案 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>
    

Plunker

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

https://angular.io/guide/cheatsheet

答案 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]标签。标签。