Angular DataTable 不顯示頁面訪問數據，但直到我重新加載頁面

Question

我開始學習 Angular，我想使用 Angular-DataTables 來顯示我的數據（后端部分工作正常我正在調用 REST API 並且沒有任何問題檢索我的數據。

問題是當我訪問包含表格的頁面時，它說表格中沒有可用數據，但是當我單擊刷新時，我的數據出現了，我導航到另一個頁面，go 返回到包含表格的頁面，在我再次刷新之前沒有數據顯示。

這是我所做的：

app.module.ts

import { DataTablesModule } from 'angular-datatables';
.
.
.
.
imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    DataTablesModule
  ],

購買.component.ts

import {Component, OnInit} from '@angular/core';
import {PurchasesService} from './purchases-service.service';

@Component({
  selector: 'app-purchases',
  templateUrl: './purchases.component.html',
  styleUrls: ['./purchases.component.scss']
})
export class PurchasesComponent implements OnInit {

  constructor(private purchaseService: PurchasesService) {
  }

  purchaseOrders;
  dtOptions: DataTables.Settings = {};

  ngOnInit(): void {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 5,
      processing: true,
      language: {
        'url': '../../assets/English.json'
      }
    };
    this.purchaseService.getOrders().subscribe((data) => {
      this.purchaseOrders = data;
    }, (err) => {
        console.log('-----> err', err);
      }
    );
  }
}

采購.component.html

<table id="purchaseOrders" datatable [dtOptions]="dtOptions" class=""> <!--row-border hover table table-striped -->
            <thead>
            <tr>
              <th> Date </th>
              <th> Vendor </th>
              <th> Customer </th>
              <th> GrandTotal </th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let order of purchaseOrders">
              <td>{{order.date}}</td>
              <td>{{order.vendor}}</td>
              <td>{{order.receiver}}</td>
              <td>{{order.grandtotal}}</td>
            </tr>
            </tbody>
          </table>

Answer 1

我會嘗試的一件事是cdr.detectChanges(); （即，通過private cdr: changeDetectorRef在構造函數中導入 chandeDetectorRef 並在設置this.purchaseorders后調用 detectchanges 方法

這可能是問題，因為服務是異步的，並且視圖在完成之前呈現。 This is usually handled automagically by angular on specific events (see https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html ), one of which should be xhr requests .

如果這不起作用，我會嘗試使用生命周期掛鈎，祝你好運！