Модал открывается, но значение из Inputs не определено. Это происходит только с первым открытием модального - PullRequest
Новая
       5

Модал открывается, но значение из Inputs не определено. Это происходит только с первым открытием модального

0 голосов
/ 31 марта 2020

Здравствуйте, у меня есть своего рода модальное подтверждение с входами: 

 @Input('input1') input1: string;
 @Input('input2') input2: boolean;

 constructor(private changeDetectorRef: ChangeDetectorRef) {
 }

 ngOnInit() {
 }

 public openModal(): void {
     console.log(this.input2)
     console.log(this.input1)
     this.confirmationModal.nativeElement.classList.add('open-modal');
 }

Родительский компонент, когда я открываю этот модальный метод внутри метода подписки. В этом методе я присваиваю значения следующим образом: 

@ViewChild('confirmationModal') confirmationModal;
input1: string;
input2: boolean;
ngOnInit(): void {    
}

ngOnDestroy(): void {
}

close(project: any) {  
 this.service.close(project).subscribe((success: ModelDto) => {
            this.confirmationModal.openModal();
            this.input2 = success.input2;
            console.log(this.input2)
            this.input1 = 'Some text';
        });
    }

В html У меня есть: 

<app-confirmation-modal #confirmationModal
                        [input1]="input1"
                        (sendConfirm)="toggleSettled($event)"
                        (generateReport)="generateReport()"
                        [input2]="input2">
</app-confirmation-modal>

Вот метод openModal из моего подтвержденияModal:

Два представленных console.logs дают неопределенное значение только при первом открытии модала. Поэтому, когда я впервые пытаюсь открыть модал, я получил пустой модал, а input1 и input2 не определены. Но с этого момента каждый раз, когда я открываю модальное окно, я получаю значения, которые должны быть и в модальном, и в console.logs. Так что проблема только в первом открытии, и я понятия не имею, что может его вызвать.

Редактировать: я проверил это больше времени, и кажется, что это как 1 клик с задержкой. Я имею в виду, что значения, представленные в Modal, взяты из цикла раньше, чем значения, которые должны быть в фактическом клике

Ответы [ 2 ]

0 голосов
/ 31 марта 2020

Возможно, вам придется инициировать обнаружение изменений вручную. Попробуйте следующее:

подтверждение-modal.component.ts 

import { Component, Input, Output, ChangeDetectorRef } from '@angular/core';

export class ConfirmationModalComponent  {
  .
  .
  constructor(private _cdr: ChangeDetectorRef) { }

  public openModal(): void {
    this._cdr.detectChanges();
    console.log(this.input1)
    console.log(this.input2)
    this.confirmationModal.nativeElement.classList.add('open-modal');
  }
}
0 голосов
/ 31 марта 2020

Хорошо, я думаю, что знаю, что здесь происходит. ngOnInit слишком рано, дочерние представления еще не инициализированы. Попробуйте вместо этого ngAfterViewInit . Дополнительные сведения см. В разделе Хуки жизненного цикла компонента из документов Angular2.

Из документов:

ngAfterViewinit : После Angular создается представление (я) компонента.

...