异步集合不起作用的ngb分页

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { NgbPaginationConfig } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
  data: any[] = []; // 存储异步数据集合
  currentPage = 1; // 当前页码
  pageSize = 10; // 每页显示的数据条数

  constructor(private http: HttpClient, private paginationConfig: NgbPaginationConfig) {
    paginationConfig.boundaryLinks = true;
    paginationConfig.maxSize = 5;
  }

  ngOnInit(): void {
    this.getData(); // 获取异步数据
  }

  getData(): void {
    this.http.get<any[]>('https://api.example.com/data').subscribe(response => {
      this.data = response; // 将异步数据赋值给data变量
    });
  }

  onPageChange(page: number): void {
    this.currentPage = page; // 更新当前页码
  }

  getPaginatedData(): any[] {
    const startIndex = (this.currentPage - 1) * this.pageSize;
    const endIndex = startIndex + this.pageSize;
    return this.data.slice(startIndex, endIndex); // 根据当前页码和每页显示的数据条数进行分页
  }
}