ngx-bootstrap 模式无法读取未定义的属性“显示”

问题描述

我正在尝试在我的 angular 应用程序中实现 ngx-bootstrap 模式。但是它给了我一个错误，说无法读取未定义的属性“显示”。

模态 HTML

`

<div *ngIf="isActive" bsModal #createOrEditAuthorModal="bs-modal" 
class="modal fade" tabindex="-1" role="dialog"
  aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">

      ............

    </div>
  </div>
</div>

`

模态 Ts

`

export class CreateOrEditAuthorModalComponent extends 
AppComponentBase {
  @ViewChild('createOrEditAuthorModal') public modal: 
  ModalDirective

  isActive = false;

  constructor(
    injector: Injector
  ) {
    super(injector);
    this.author = new UpdateAuthorinput();
  }

  show(): void {
    this.modal.show();
    this.isActive = true;
  }

  close(): void {
    this.modal.hide();
    this.isActive = false;
  }

}

`

父组件 HTML

`

<app-create-or-edit-author-modal #createOrEditAuthor></app-create- 
or-edit-author-modal>

`

父组件 Ts

`

export class AuthorsComponent extends AppComponentBase implements 
AfterContentinit {
  @ViewChild('createOrEditAuthor') createOrEditAuthor: 
CreateOrEditAuthorModalComponent

  constructor(
    injector: Injector
  ) {
    super(injector);
  }

  ngAfterContentinit(): void {

  }

  createNewAuthor(): void {
    this.createOrEditAuthor.show();
  }

}

`

虽然看起来一切正常，但不知道问题出在哪里。它昨天有效，但今天出错。请任何身体帮助....

解决方法

删除 *ngIf="isActive" 可以解决问题