javascript - 如何修复错误：ExpressionChangedAfterItHasBeenCheckedError zorro modal in angular

Question

列表项.html

   <nz-list
                [nzDataSource]="alerts$ | async"
                nzBordered
                nzSize="small"
                [nzItemLayout]="'horizontal'"
                [nzRenderItem]="notif"
                [nzBordered]="false"
              >
                <ng-template #notif let-item>
    <nz-list-item [nzContent]="content" (click)="openNotifModal(item)"></nz-list-item>
    </ng-template>

列表项.ts

@Select(AlertState.get('books')) alerts$: Observable<Partial<Books>>;
displayAlert$ = new BehaviorSubject(undefined);
openNotifModal(item?: any) {
    this.displayAlert$.next(item);
  }

通知-modal.ts

@Input()
  set onDisplay(data: object) {
    if (data) {
      this.dataDisplayed = { ...data };
      this.openNotifModal();
    }
  }

notifModal: NzModalRef;

constructor(private modalService: NzModalService ){ }

openNotifModal(): void {
    this.notifModal = this.modalService.create({
          nzTitle: 'Message Alert',
          nzContent: 'This is a message alert'
          nzWrapClassName: 'vertical-center-modal dialog-modal',
          nzWidth: 400,
          nzMaskClosable: false,
          nzClosable: false,
          nzOnOk: () => console.log('Click ok')
        });
}

有两个模块是list-itemand notificitaion-modal。

当我尝试单击模式时，这是控制台中的错误消息ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'nzNoAnimation: undefined'. Current value: 'nzNoAnimation: false'. It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook ?

如何解决？导致每次我点击它都有一个错误的项目。