angular - 在加载时数据更改时循环子组件数据？

Question

目前，我的 Angular 应用程序中有以下代码（简化版）。

父组件（html）：

<div *ngIf="statistic | async">
    <div *ngFor="let item of data">
        {{item}}
    </div>
    <app-pager [init]="statistic.data" (dataChange)="data = $event"></app-pager>
</div>

子组件（ts）：

export class PagerComponent implements OnInit {
  public data: any[] = [];
  public pageIndex: number = 1;
  public pageTotal: number = 1;
  public itemsPerPage: number = 15;

  @Input() public set init(data: any[]) {
    this.data = data;
    this.pageTotal = Math.ceil(data.length / this.itemsPerPage);
  }
  @Output() dataChange = new EventEmitter<any[]>();
  
  ngOnInit(): void {
    this.selectPage(1);
  }

  selectPage(page: number) {
    this.pageIndex = page;
    this.dataChange.emit(this.data.slice((this.pageIndex - 1) * this.itemsPerPage, this.pageIndex * this.itemsPerPage));
  }

  previousPage() {
    if (this.hasPreviousPage()) {
      this.selectPage(this.pageIndex - 1);
    }
  }

  hasPreviousPage(): boolean {
    return this.pageIndex > 1;
  }

  nextPage() {
    if (this.hasNextPage()) {
      this.selectPage(this.pageIndex + 1);
    }
  }

  hasNextPage(): boolean {
    return this.pageIndex < this.pageTotal;
  }
}

运行此代码时，控制台会引发 ExpressionChangedAfterItHasBeenCheckedError 错误，这是正常的，因为当加载子组件时数据发生更改时，它会循环数据。是否有这样做的正确方法，或者我应该让子组件跟踪页面并返回当前页面，而父组件跟踪需要循环的数据？

标签： angulartypescript