如何为按钮循环创建角度模态弹出窗口

Question

我是angular的初学者，目前正在使用angular9。我有一个任务，该任务使用如下循环创建一组按钮。

  <div class="play-game" [formGroup]="seatsFormGroup">
  <div class="row" *ngFor="let seat of seats;let idx = index">
    <label>Seat {{seat.id}}</label>
    <input type="input"
           [value]=""
           formControlName="{{seat.name}}"
           />
    <button (click)="join(seat.id)">Join</button>
  </div>

我在数组中有一组1-10的座位，上面的代码为每个座位ID创建了一组按钮。我需要为每个按钮添加一个模式弹出窗口，以在单击时显示座位ID。我在内部尝试了以下代码，但在每个弹出窗口中，它始终只给我最后一个座位ID（10）。请提供代码帮助。

      <!-- The Modal -->
  <div class="modal" id="myModal" [style.display]="showModal ? 'block' : 'none'">
    <div class="modal-dialog">
      <div class="modal-content">
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">{{seat.id}}</h4>
          <button type="button" class="close" data-dismiss="modal" (click)="hide()">&times;</button>
        </div>
        <!-- Modal body -->
        <div class="modal-body">
          <p></p>
        </div>
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal" (click)="hide()">Dismiss</button>
        </div>
      </div>
    </div>
  </div>

Answer 1

seat-modal-component.html

<div class="modal" id="myModal" [style.display]="showModal ? 'block' : 'none'">
    <div class="modal-dialog">
      <div class="modal-content">
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">{{seat.id}}</h4>
          <button type="button" class="close" data-dismiss="modal" (click)="hide()">&times;</button>
        </div>
        <!-- Modal body -->
        <div class="modal-body">
          <p></p>
        </div>
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal" (click)="hide()">Dismiss</button>
        </div>
      </div>
    </div>
  </div>

seat-modal.component.ts

export class SeatComponent {
   public seat;

}

具有循环的组件HTML：-

<div class="play-game" [formGroup]="seatsFormGroup">
  <div class="row" *ngFor="let seat of seats;let idx = index">
    <label>Seat {{seat.id}}</label>
    <input type="input"
           [value]=""
           formControlName="{{seat.name}}"
           />
    <button (click)="join(seat)">Join</button>
  </div>

TS：-

public seatModalRef;
  constructor(private modalService: NgbModalService) {}
  public join(seat) {
    this.seatModalRef = this.modalService.open(SeatModalComponent);
    this.seatModalRef.componentInstance.seat = seat;
  }