Мой 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>
Я хочу назначить динамический идентификатор для каждого элемента, но не могу заставить его работать. Имя отображается, но идентификатор отсутствует.
как вы сказали, Angular 2.0.0.b.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>
Вы можете посмотреть здесь дополнительную информацию в синтаксисе шаблона.
Все методы, предоставленные @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).
Я нашел ответ. Я могу использовать тэг [attr.id] в теге 'li'.