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

Question

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

  <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.I 需要为每个按钮添加一个模式弹出窗口以显示座位 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>

座位-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: NgbModal) {}
  public join(seat) {
    this.seatModalRef = this.modalService.open(SeatModalComponent);
    this.seatModalRef.componentInstance.seat = seat;
  }

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

How to create angular modal popups for a loop of buttons

modal-dialog

popup

angular

angular9