1

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

....
<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 是否有错误？

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

4

1 回答 1

0

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

<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; 
    }
于 2022-03-02T08:09:14.097 回答