ngFor指令中的角12 ngFor导致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>
....

在.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有错误吗？

编辑:我的问题是，在子组件中，我设置了一些模块布尔输入值，以便在复选框中显示，但是打开连续选项卡，复选框没有正确设置。第一个选项卡已正确设置，但连续选项卡的值为第一个选项卡的值。

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>

然后在你的打字记录文件中：-

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