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