Question

我正在开发Angular应用程序，但已经遇到过几次ExpressionChangedAfterItHasBeenCheckedError，但是这次我不知道该怎么做。

我有一个使用@ContentChild和@ContentChildren的子组件。在子组件内部，有一个子列表，我将使用*ngTemplateOutlet渲染所有这些子。

我用一个基于TableComponent的示例重新创建了这种情况，该示例具有一个HeaderComponent，其中可以包含多个HeaderItemComponent，并且一个QueryList为{{ 1}}。

我用完整的代码制作了StackBlitz，以在以下位置重现错误：

https://stackblitz.com/edit/angular-6ieqh7

对我来说，很奇怪的是，即使我在渲染表时删除了标题，即使标题项与行的显示方式完全相同，也不会发生错误。

发生错误：

RowItem

没有错误：

<table>
  <table-header>
    <table-header-item>Id</table-header-item>
    <table-header-item>Name</table-header-item>
    <table-header-item>Status</table-header-item>
  </table-header>

  <table-row *ngFor="let row of tableData">
    <table-row-item>{{ row.id }}</table-row-item>
    <table-row-item>{{ row.name }}</table-row-item>
    <table-row-item>{{ row.status }}</table-row-item>
  </table-row>
</table>

最后，该错误被指控为<table> <table-row *ngFor="let row of tableData"> <table-row-item>{{ row.id }}</table-row-item> <table-row-item>{{ row.name }}</table-row-item> <table-row-item>{{ row.status }}</table-row-item> </table-row> </table>的第2行：

header.component.html

Answer 1

您可以通过将标题项包装在setTimeOut中来解决该错误

For More Info About Check this:

ngAfterContentInit(): void {
    setTimeout(()=>{
         this.headerItems = this.inputHeaderItems.toArray();
        this.inputHeaderItems.changes.subscribe((value: QueryList<HeaderItemComponent>) => {
          this.headerItems = value.toArray();
          this.cdr.detectChanges();
        });
      })

      }

具有ng-template的ContentChildren在组件内部生成ExpressionChangedAfterItHasBeenCheckedError

1 个答案: