Динамически назначать идентификатор элемента внутри ngFor
Я пытаюсь дать динамически назначаемый идентификатор для div внутри * ngFor. Я хотел бы, чтобы div назывался wave1, wave2, wave3 и т. д.
<li *ngFor = "let episode of episodes; let i = index">
<div id = "wave{{i}}"></div>
</li>
Однако это вызывает следующую ошибку:
ERROR DOMException: Failed to execute 'querySelector' on 'Document': '#wave[object Object]' is not a valid selector.
какую версию angular вы используете?
angular 2 - это версия
Ответы 4
Вам не нужно определять i
<li *ngFor = "let episode of episodes">
<div id = "wave{{episode}}">{{episode}}</div>
</li>Обновлено: в случае, если эпизоды - это список объектов
<li *ngFor = "let episode of episodes">
<div id = "wave{{episodes.indexOf(episode)}}">{{episode.name}}</div>
</li>Это не сработает, если episodes - это список объектов, который, вероятно, находится в примере OP
Верно, позвольте мне изменить пример
Для меня это работает, если я добавляю одиночные кавычки. В противном случае Angular обнаружит машину.
<li *ngFor = "let episode of episodes; let i = index">
<div id = "'wave' + i"></div>
</li>
То, что у вас есть, правильно и должно работать в угловом формате 4/5. Возможно, вы используете действительно старую, предварительную версию angular 2?
Вот стек с вашим кодом и приведенным ниже кодом, оба работают
https://stackblitz.com/edit/angular-khur4v?file=app%2Fapp.component.html
Вы также можете сделать это таким образом, что является предпочтительным способом.
<li *ngFor = "let episode of episodes; let i = index">
<div [attr.id] = "'wave' + i">{{episode.name}}</div>
</li>
Вы можете использовать {{ 'wave' + i }} вместо wave{{i}}. Сделайте это как угловое выражение. Это полный ngFor:
<li *ngFor = "let episode of episodes; let i = index">
<div id = "{{ 'wave' + i }}"></div>
</li>
Он работает и создает div с правильным id.
document.getElementById("wave1")
Результат будет таким:
<div id="wave1">wave1</div>
но помните, что ваш код будет начинаться с wave0, поскольку i = index начинается с 0.
Это отлично подходит для присвоения идентификатора, но как затем динамически ссылаться на идентификатор в своем html? Я пытаюсь реализовать проверку по полю с динамически назначаемым идентификатором. Мне нужно сказать что-то вроде * ngIf = "'controlName' + index.invalid".
Можете ли вы добавить код, в котором вы используете
'#wave...? Кажется, ясно, что вы объединяете объект со строкой