Как я могу установить идентификатор элемента, который создан ngFor?

Question

Я создал несколько элементов:

<span *ngFor="let versuch of versuche">
  <div id="titleId[versuch]"><br></div>
</span>

titleId - это список строк, в которых хранятся мои идентификаторы элементов).

Но если я попытаюсь получить доступ к элементы, с document.getElementById('__title__5'), элемент не найден (__title__5 является одним из идентификаторов элементов).

Итак, вы знаете способ установить идентификаторы для кода?

Answer 1

Используйте index из *ngFor. Попробуйте следующее

Опция 1 - titleId - это массив строк

<span *ngFor="let versuch of versuche; let i=index">
  <div attr.id="{{titleId[i]}}"><br></div>
</span>

Опция 2 - titleId не используется

Если вам нужно иметь соответствующие идентификаторы на основе индекса переменной versuche, вы можете пропустить переменную titleId и сделать это прямо в шаблоне.

<span *ngFor="let versuch of versuche; let i=index">
  <div [attr.id]="'__title__' + i">{{versuch}}<br></div>
</span>

Вариант 3 - titleId - это объект

Если titleId - это объект с ключами, соответствующими каждому versuche, то следующее должно работать

компонент

  versuche = [ 'versuche_1', 'versuche_2', 'versuche_3' ];
  titleIdObj = {
    'versuche_1': '__title__1',
    'versuche_2': '__title__2',
    'versuche_3': '__title__3',
  }

template

<span *ngFor="let versuch of versuche">
  <div attr.id="{{titleIdObj[versuch]}}">{{versuch}}<br></div>
</span>

Рабочий пример: Stackblitz

Answer 2

Используйте [id] вместо id, как в примере ниже:

<span *ngFor="let versuch of versuche">
    <div [id]="titleId[versuch]"><br></div>
</span>

Answer 3

ngAttr для привязки к произвольным атрибутам AngularJS

Например, при рассмотрении этого шаблона

<span *ngFor="let versuch of versuche">
  <div ng-attr-id="{{ 'titleId-' + versuch  }}"><br></div>
</span>

Do c - https://docs.angularjs.org/guide/interpolation# -ngattr-для-привязки к произвольным атрибутам

Angular

 <li *ngFor="#item of items" #elem [attr.id]="item.id">
        {{ item.name}} ID: {{elem.id}}
 </li>