ngb проблема с модальным компонентом при загрузке в oninit angular 6 - PullRequest
Новая
       13

ngb проблема с модальным компонентом при загрузке в oninit angular 6

1 голос
/ 09 апреля 2019

Я пытаюсь загрузить моё модальное окно в функцию Oninit. но есть проблема с этим. пожалуйста, проверьте изображение ниже

enter image description here

*modal open function*
  open() {
    const modalRef = this.modalService.open(NgbdModalContent);
    modalRef.componentInstance.name = 'World';
  }

    ngOnInit() {
       if (JSON.parse(localStorage.getItem('token')).user.isPasswordReset === 1) {
        this.open();
    }
       // console.log(this.userorg );

    }

Я пытаюсь вызвать функцию .open () при загрузке страницы. этот модальный контент в другом компоненте. я думаю, что ошибка произошла из атрибута 'ngIf'. пожалуйста, проверьте мой ниже модальный компонент.

мой модальный компонент 

@Component({
  selector: 'ngbd-modal-content',
  template: `
    <div class="modal-header">
      <h4 class="modal-title">Reset Password</h4>
      <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
     <p *ngIf="resetPasswordError" class="text-center errorRPW">{{resetPasswordErrorMessage}}</p>
     <div *ngIf="resetPasswordSuccess" class="alert alert-success" role="alert">
Your Password has been reset.
</div>
     <form name="form" #resetpasswordform="ngForm" novalidate (ngSubmit)="resetpasswordform.form.valid && resetPassword();">
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-4 col-form-label">Username</label>
    <div class="col-sm-8">
     <input type="text" required class="form-control" id="userName" [(ngModel)]="passwordModel.userName" name="userName" #userName="ngModel" placeholder="UserName">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-4 col-form-label">Current Password</label>
    <div class="col-sm-8">
      <input type="password" required [(ngModel)]="passwordModel.oldPassword" name="oldPassword" #oldPassword="ngModel" class="form-control" id="inputPassword" placeholder="Current Password">
    </div>
  </div>

    <div class="form-group row">
    <label for="inputPassword" class="col-sm-4 col-form-label">New Password</label>
    <div class="col-sm-8">
      <input type="password" required class="form-control" id="newinputPassword" [(ngModel)]="passwordModel.newPassword" name="newPassword" #newPassword="ngModel" placeholder="New Password">
    </div>
  </div>
   <div class="form-group row">
    <label for="inputPassword" class="col-sm-4 col-form-label">Confirm Password</label>
    <div class="col-sm-8">
      <input type="password" required class="form-control" id="confirminputPassword" [(ngModel)]="resetpasswordform.confirmPassword" name="confirmPassword" #confirmPassword="ngModel" placeholder="Confirm Password" compare="newPassword">
    </div>
        <div class="text-danger text-danger-popup" *ngIf="confirmPassword.invalid && (confirmPassword.dirty || confirmPassword.touched)">
<div *ngIf="confirmPassword.errors['compare']"> Password confirm do not match</div>
</div>
  </div>
     <div class="modal-footer">
      <button type="submit" class="btn btn-primary mb-2 expad" [disabled]="resetpasswordform.invalid"> Reset Password</button>

    </div>



</form>
    </div>

})

ошибка сказала,

Ошибка: ExpressionChangedAfterItHasBeenCheckedError: Expression изменилось после того, как было проверено. Предыдущее значение: 'ngIf: undefined'. Текущее значение: 'ngIf: undefined'.

Кажется, что представление было создано после того, как его родитель и его дочерние элементы были проверены на грязную. Создан ли он в хуке обнаружения изменений?

Можете ли вы помочь мне решить эту проблему?

Спасибо

...