给出动态 id Angular2 绑定

Give dynamic id Angular2 Binds

本文关键字：Angular2 绑定 id 动态      更新时间：2023-09-26

My JavaScript：

 this.items = [
            {name: 'Amsterdam1', id: '1'},
            {name: 'Amsterdam2', id: '2'},
            {name: 'Amsterdam3', id: '3'}
        ];

我的网页：

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

我想为每个元素分配一个动态 ID，但无法让它工作。名称显示，但 id 未显示。

你说的工作方式，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>

普伦克

可以在此处查看模板语法中的详细信息。

https://angular.io/guide/cheatsheet

@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且便宜，因此是默认的。

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

这应该有效（在 angular2 上为我工作）。

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

相关文章：