我在一个有Angular 的项目中第一次尝试使用DataTable，我设法让表格模板与我的数据一起工作（我从一个服务中得到的）但是每次我按下一个按钮，所有的数据都消失了（日志中未显示错误），每页应显示的行数不起作用，并且我在表中获得的第一行是“表中无可用数据”只有当我刷新页面时，数据才会再次返回。基本上没有一个功能在工作。
Html表如下

<div class="center">
  <h1><i class='bx bxs-package'></i> Routes List</h1>
  <table id="tbody" datatable [dtOptions]="dtoptions"  class="row-border hover">
    <thead>
    <tr>
      <th>Starting Warehouse ID</th>
      <th>Destination Warehouse ID</th>
      <th>Distance</th>
      <th>Time</th>
      <th>Energy</th>
    </tr>
    </thead>
  </table>
</div>

我正在使用的服务

public extractData(res: any) {
  return res || {};
}

getRoutes(): Observable<any> {
  return this.http.get('http://localhost:3000/api/routes').pipe(map(this.extractData));
}

listRoutes(): void {
  let tbody = document.getElementById('tbody') as HTMLTableElement;
  let array = this.getRoutes();

  array.forEach(function (i) {
    for (let j = 0; j < i.length; j++) {
      let tr = tbody.insertRow();

      let td_idWarehouseStart = tr.insertCell();
      let td_idWarehouseDestination = tr.insertCell();
      let td_distance = tr.insertCell();
      let td_time = tr.insertCell();
      let td_energy = tr.insertCell();

      td_idWarehouseStart.innerText = i[j].idWarehouseStart;
      td_idWarehouseDestination.innerText = i[j].idWarehouseDestination;
      td_distance.innerText = i[j].distance;
      td_time.innerText = i[j].time;
      td_energy.innerText = i[j].energy;

    }
  });
}

这是网页上的输出
enter image description here
我不知道如何解决这个问题。我知道这与我的服务有关，因为如果我不使用服务，并将数据硬编码到html中，它就能正常工作