Я пытаюсь открыть модал внутри *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">×</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
?