Как создать angular модальных всплывающих окон для всех oop кнопок - PullRequest
Новая
       25

Как создать angular модальных всплывающих окон для всех oop кнопок

0 голосов
/ 27 мая 2020

Я новичок в angular и в настоящее время работаю с angular 9. У меня есть задача, которая создает набор кнопок с помощью al oop следующим образом. 

  <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 внутри массива, и приведенный выше код создает набор кнопок для каждого идентификатора места. Мне нужно добавить модальное всплывающее окно для каждой кнопки, отображаемой с идентификатором места при нажатии. Я пробовал приведенный ниже код внутри, но он всегда давал мне только последний идентификатор места (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>

1 Ответ

0 голосов
/ 27 мая 2020

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;

}

Компонент, в котором у вас есть L oop 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;
  }
...