Блог

Я пытаюсь использовать несколько ngbModal в моем угловом компоненте. Я могу успешно открывать и закрывать первый модал. Я получаю сообщение об ошибке при попытке открыть вторую модель. Как это исправить. Пожалуйста, направьте меня.

Когда я нажимаю на кнопку Test1, она показывает мне ошибку. ОШИБКА TypeError: «this.modalService не определен»

HTML

 <button (click)="onClick($event)"></button>
<ng-template #firstTemplate let-modal>
  <div class="modal-footer">
  
    <button type="button" class="btn  btn-primary" (click)="onTest1($event); modal.close('Save click')">test1</button>
  
  </div>
</ng-template>

<ng-template #secondTemplate let-modal>
  <div class="modal-footer">
  
    <button type="button" class="btn  btn-primary" (click)="onTest2($event); modal.close('Save click')">test2</button>
  
  </div>
</ng-template>
  

TS

 @ViewChild('firstTemplate', {static: true}) firstTemplate: TemplateRef<any>;
  @ViewChild('secondTemplate', {static: true}) secondTemplate: TemplateRef<any>;
  @ViewChild('disabledEsc', {read: TemplateRef, static: true}) disabledEscTemplate: TemplateRef<HTMLElement>;

constructor(private modalService: NgbModal) {}

 onClick(event) {
    event.srcElement.blur();
    event.preventDefault();
    this.modalService.open(this.firstTemplate, {
      windowClass: 'ngb-modal',
      size: 'lg', scrollable: true, centered: true, backdrop: 'static',
    });

  onTest1(event) {
    console.log(event);
    event.srcElement.blur();
    event.preventDefault();
    setTimeout(this.testModal, 500);
  }

  testModal() {
    this.modalService.open(this.secondTemplate, { //   error
      windowClass: 'ngb-modal',
      size: 'lg', scrollable: true, centered: true, backdrop: 'static',
    });
  }
}


  

У вас ошибка, что modalService не определен, потому что, когда testModal метод выполняется с помощью setTimeout, this контекст не установлен для экземпляра вашего компонента.

чтобы исправить это, вы можете использовать функцию со стрелкой :

 setTimeout(() => this.testModal(), 500);
  

или вы можете привязать этот контекст функции testModal к вашему компоненту :

 const boundTestModal = this.testModal.bind(this);
setTimeout(boundTestModal , 500);