如何处理多个模态，一个对应于ngFor中的每个元素

<!-- parent.component.html -->
<div *ngFor="let item of items">
  <button (click)="openModal(item)">Open Modal</button>
</div>

<!-- modal.component.html -->
<div class="modal">
  <div class="modal-content">
    <h1>{{ data }}</h1>
    <button (click)="closeModal()">Close</button>
  </div>
</div>

// parent.component.ts
import { Component } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal'; // 或者 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

import { ModalComponent } from './modal.component';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  items: any[] = [/* 数据源 */];
  modalRef: BsModalRef; // 或者 private modalService: NgbModal;

  constructor(private modalService: BsModalService) {} // 或者 constructor(private modalService: NgbModal) {}

  openModal(item: any) {
    this.modalRef = this.modalService.show(ModalComponent, { initialState: { data: item } }); // 或者 this.modalRef = this.modalService.open(ModalComponent);
  }
}

// modal.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css']
})
export class ModalComponent {
  @Input() data: any;
  @Output() closeModalEvent = new EventEmitter();

  closeModal() {
    this.closeModalEvent.emit();
  }
}