Angular 12 ngFor 指令中的 ViewChildren 导致 ExpressionChangedAfterItHasBeenCheckedError

Question

我有一个父组件，可以从中打开包含子组件的各种选项卡这是父组件的一部分：

....
<p-tabPanel header="{{tab.title}}" *ngFor="let tab of tabs; let i = index" [closable]="true">
    <app-child-tab [modules]="modules" [profile]="tab.body" (onProfileModified)="onProfileModified()">
    </app-cmup-tab>
</p-tabPanel>
....

in.ts:

export class ParentComponent implements onInit {
    @ViewChildren(ChildTabComponent) childTabsComponent: QueryList<ChildTabComponent>;
    tabs: any[] = [];
    ...

    ngOnInit() {
        tabs.push({title: 'First', body: firstObject});
        tabs.push({title: 'Second', body: secondObject});
        ...
    }

    onProfileModified() {
       ... do stuff ...
    }
}

孩子是：

export class ChildTabComponent {
    @Input() profile: any;
}

从父视图打开选项卡，出现错误：

ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked

使用 ViewChildren 是否有错误？

编辑：我的问题是，在子组件中，我设置了一些模块 boolean 输入值以显示在复选框中，但打开连续选项卡时，复选框设置不正确。 第一个选项卡已正确设置，但后续采用第一个选项卡的值。

Answer 1

我会说因为“选项卡”集合在您推送值时正在发生变化，这可能是问题所在。

<div *ngIf="tabs">
  <p-tabPanel header="{{tab.title}}" *ngFor="let tab of tabs; let i = index" [closable]="true">
      <app-child-tab [modules]="modules" [profile]="tab.body" (onProfileModified)="onProfileModified()">
      </app-cmup-tab>
  </p-tabPanel>
</div>

然后在您的 typescript 文件中：-

    public tabs: any[] = null;
    ...

    ngOnInit() {
       let localTabs: any[] = [];
       localTabs.push({title: 'First', body: firstObject});
       localTabs.push({title: 'Second', body: secondObject});
        ...
       // We now give the component all the info at once
       this.tabs = localTabs; 
    }