Как открывать нужное модальное окно в цикле?

Для открытия нужного модального окна в цикле при использовании Angular, вам понадобится следовать нескольким шагам.

Первым шагом будет создание массива или объекта, содержащего информацию о модальных окнах, которые вы хотите открывать в цикле. Например, можно создать массив объектов, каждый из которых будет содержать уникальный идентификатор модального окна и соответствующую информацию.

Пример кода для этого может выглядеть следующим образом:

modalWindows = [
  { id: 1, title: 'Модальное окно 1', content: 'Содержимое модального окна 1' },
  { id: 2, title: 'Модальное окно 2', content: 'Содержимое модального окна 2' },
  { id: 3, title: 'Модальное окно 3', content: 'Содержимое модального окна 3' },
];

Затем, в шаблоне вашего компонента, вы можете использовать директиву *ngFor для рендеринга списка модальных окон. Например:

<div *ngFor="let modal of modalWindows">
  <button (click)="openModal(modal.id)">Открыть модальное окно {{ modal.id }}</button>
</div>

Здесь мы используем директиву *ngFor для создания кнопок, которые будут открывать соответствующие модальные окна. Функция openModal будет вызываться при клике на кнопку и принимать идентификатор модального окна.

Далее, в вашем компоненте, необходимо создать функцию openModal, которая будет принимать идентификатор модального окна и открывать его. Например:

openModal(modalId: number) {
  // Ваш код для открытия модального окна по идентификатору
}

Внутри этой функции вы можете использовать любую библиотеку или метод Angular для открытия модального окна, например, MatDialog из Angular Material или свой собственный компонент модального окна.

Вот пример использования MatDialog для открытия модального окна:

import { MatDialog } from '@angular/material/dialog';

constructor(private dialog: MatDialog) {}

openModal(modalId: number) {
  const dialogRef = this.dialog.open(ModalComponent, {
    data: { modalId },
  });
}

В этом примере мы используем MatDialog для открытия модального окна, представленного компонентом ModalComponent. Мы также передаем идентификатор модального окна через объект data, чтобы компонент модального окна имел доступ к нему.

Наконец, вам нужно реализовать компонент модального окна (ModalComponent), который будет отображать содержимое модального окна на основе переданных данных. В компоненте модального окна вы можете использовать @Inject или MAT_DIALOG_DATA для получения переданных данных. Пример:

import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import { Component, Inject } from '@angular/core';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
})
export class ModalComponent {
  constructor(@Inject(MAT_DIALOG_DATA) public data: any) {}
}

В итоге, при клике на кнопку в цикле, соответствующее модальное окно будет открываться с уникальным содержимым, которое вы определите в массиве modalWindows или другом обработчике события.