ngx-bootstrap 模态无法读取未定义的 属性 'show'

Question

我正在尝试在我的 angular 应用程序中实施 ngx-bootstrap 模式。但它给了我一个错误，说 Cannot read 属性 'show' of undefined.

模态 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;
  }

}

`

Parent 组件 HTML

`

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

`

Parent 组件 Ts

`

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

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

  ngAfterContentInit(): void {

  }

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

}

`

虽然一切正常，但不知道问题出在哪里。它昨天工作，但今天出错。请任何 body 帮助....

Answer 1

删除 *ngIf="isActive" 解决了问题