Представьте себе следующий сценарий:

У вас в компоненте есть несколько фильтров выбора и вам нужно подобрать один из них, они динамические, то есть фильтр генерируется на каждый элемент, приходящий из апи.

Пример:

Допустим, вы хотите узнать, какой пользователь щелкнул с помощью document get Element By Id, и вы не хотите использовать подход viewChild, и в этом случае я покажу вам способ присвоить идентификатор каждому из них в вашем html.

Давайте представим 2 сценария: один, как в примере выше, где у вас есть идентификатор каждого из них, и другой сценарий, в котором у вас нет идентификатора.

Сценарий 1 — с идентификатором:

Просто добавьте в html идентификатор на основе результата, полученного от вашего API.

/*API Result:*/
this.filters = [
      {
        id: 1,
        name: 'Land animals',
        options: [
          'Dog',
          'Cat',
          'Giraffe'
        ]
      },

      {
        id: 2,
        name: 'Aquatic animals',
        options: [
          'Crab',
          'Lobster',
          'Shark'
        ]
      },

      {
        id: 3,
        name: 'flying animals',
        options: [
          'eagle',
          'dragon-fly',
          'Bat'
        ]
      },
    ];

Добавьте идентификатор, полученный от API:

<div class="container" style="padding: 20px">
  <div class="row">
    <div *ngFor="let animals of filters; let index = index" class="col-sm">
      <select [id]="animals.id" class="form-select" (click)="getSelectById(animals.id)">
        <option selected disabled>{{ animals.name }}</option>
        <option *ngFor="let option of animals.options">
          {{ option }}
        </option>
      </select>
    </div>
  </div>
</div>

Используйте идентификатор результата API, чтобы создать идентификатор выбора.

[id]="animals.id"

Мы добавили метод щелчка, который передает идентификатор, назначенный выбору, в файл ts.

Метод клика:

(click)="getSelectById(animals.id)"
getSelectById(id: any) {
    let el = document.getElementById(id);
    console.log('selected: ', el);
  }

Вот и все, в зависимости от того, на что нажимает пользователь, у вас будет этот элемент для использования.

Сценарий 2 — Нет удостоверения личности.

Что делать, если у меня нет идентификатора, исходящего от API? А теперь, Simple, мы создадим динамический идентификатор, используя индекс цикла, я вам покажу.

Мы назначаем строку + индекс цикла, чтобы создать идентификатор для каждого выбора на экране, когда пользователь нажимает на один из них, просто передает индекс, который был нажат, в метод.

API без идентификатора:

    this.filters = [
      {
        name: 'Land animals',
        options: [
          'Dog',
          'Cat',
          'Giraffe'
        ]
      },

      {
        name: 'Aquatic animals',
        options: [
          'Crab',
          'Lobster',
          'Shark'
        ]
      },

      {
        name: 'flying animals',
        options: [
          'eagle',
          'dragon-fly',
          'Bat'
        ]
      },
    ];
<div class="container" style="padding: 20px">
  <div class="row">
    <div *ngFor="let animals of filters; let index = index" class="col-sm">
      <select id="select{{ index }}" class="form-select" (click)="getSelectById(index)">
        <option selected disabled>{{ animals.name }}</option>
        <option *ngFor="let option of animals.options">
          {{ option }}
        </option>
      </select>
    </div>
  </div>
</div>

Используйте имя + индекс для создания пользовательского идентификатора:

id="select{{ index }}"

В вашем методе просто соберите идентификатор и передайте его в документ.

  getSelectById(index: any) {
    let formattedId = `select${index}`;
    let el = document.getElementById(formattedId);
    console.log('selected: ', el);
  }

В HTML каждый выбор будет иметь свой собственный идентификатор.

Вот и все, теперь вы можете получить выбранный выбор и использовать его.