Открытие модала внутри ng для замораживания страницы - PullRequest
0 голосов
/ 30 ноября 2018

Я пытаюсь открыть модал внутри *ngFor, и когда когда-либо вызывается кнопка, чтобы открыть модал, страница зависает, но эта же кнопка работает нормально, если я использую ее вне *ngFor

<div #project.id *ngFor="let project of projects >
  <button class="btn btn-lg btn-outline-primary" (click)="open(project.id)">
    Launch demo modal
  </button>
</div>

<ng-template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Hi there!</h4>
    <button ngbAutofocus type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <p>Hello, World!</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="c('Save click')">Save</button>
  </div>
</ng-template>

Код контроллера

open(card) {
   console.log("inside open");
   const options = {
     ariaLabelledBy: 'modal-basic-title',
     container:card, 
     size:'lg'
   }

   this.modalService.open(this.changePictureModal, options)
    .result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed 
      ${this.getDismissReason(reason)}`;
    });
}

Метод вызывается из *ngFor, но модальное окно не открывается.Опять же, если я переместлю кнопку за пределы дальней петли либо над, либо под блоком for, он будет работать просто отлично.

ВАЖНО

Это происходит только для массивовкоторые динамически заполняются с сервера.Я попробовал тот же цикл с жестко закодированным массивом в контроллере, и все работает!Любые подсказки, как обращаться с динамическими массивами, имеющими модальное значение в *ngFor?

...