如何将Angular Bootstrap Table“完整示例”与真实服务一起工作？

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

import { HttpClient } from '@angular/common/http';

export class TableComponent {
  constructor(private http: HttpClient) {}

  getData() {
    return this.http.get('https://api.example.com/data');
  }
}

<table class="table">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of data">
      <td>{{ item.id }}</td>
      <td>{{ item.name }}</td>
      <td>{{ item.email }}</td>
    </tr>
  </tbody>
</table>

export class TableComponent implements OnInit {
  data: any[];

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.getData().subscribe((response: any[]) => {
      this.data = response;
    });
  }

  getData() {
    return this.http.get('https://api.example.com/data');
  }
}

<app-table></app-table>