Question

我正在尝试在*ngFor内打开Modal，并且每次调用打开Modal的按钮时，页面都会冻结，但是如果我在*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调用该方法，但是Modal没有打开。再次，如果我将按钮移到for块上方或下方的far循环之外，则效果很好。

重要

这仅发生在从服务器动态填充的阵列上。我在控制器中使用硬编码数组尝试了相同的循环，并且一切正常！有什么线索如何处理*ngFor中具有模态的动态数组？

在ngFor内部打开模态会冻结页面

0 个答案: