Javascript oninit角度6加载时ngb模态组件问题

我正在尝试在Oninit函数中加载模式窗口。但这有一个问题。请检查下面的图片

我试图在页面加载中调用.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>

})

@组件({
选择器：“ngbd模式内容”，
模板：`
重置密码
&时代；
{{{resetPasswordErrorMessage}

您的密码已被重置。
用户名
当前密码
新密码
确认密码
密码确认不匹配
重置密码
})

他说,

错误：ExpressionChangedTerrithasBeenCheckedError:表达式 已在检查后更改。上一个值：“ngIf:undefined”。 当前值：“ngIf:未定义”

该视图似乎是在父视图及其子视图已被脏检之后创建的。它是在变更检测钩子中创建的吗

你能帮我解决这个问题吗

---

谢谢

您应该在

ngAfterViewInit

上执行，而不是在

ngOnInit

上执行。您的意思是“this.open（）”函数应该在ngAfterViewInit（）函数中执行？我做到了。但同样的错误也会发生调整测试时，请尝试执行以下操作

ngAfterViewInit（）{setTimeout（（）=>{/*在此处打开模态*/}，0）}

Yanus git，现在没有错误。谢谢你应该在ngAfterViewInit（）函数中使用

ngAfterViewInit

而不是

ngOnInit

你的意思是“this.open（）”函数应该在ngAfterViewInit（）函数中使用？我做到了。但同样的错误也会发生调整测试时，请尝试执行以下操作

ngAfterViewInit（）{setTimeout（（）=>{/*在此处打开模态*/}，0）}

Yanus git，现在没有错误。谢谢

@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>

})