Angular DataTable 不显示页面访问数据，但直到我重新加载页面答案

【问题标题】：Angular DataTable not showing data on page access but until i reload the pageAngular DataTable 不显示页面访问数据，但直到我重新加载页面
【发布时间】：2020-08-15 21:40:40
【问题描述】：

我开始学习 Angular，我想使用 Angular-DataTables 来显示我的数据（后端部分工作正常，我正在调用 REST API 并且我的数据被检索没有任何问题）。

问题是当我访问包含表格的页面时，它说表格中没有可用数据，但是当我单击刷新时，我的数据出现了，我导航到另一个页面并返回到包含表格的页面，直到我刷新之前没有数据显示再次。

这就是我所做的：

app.module.ts

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

purchases.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);
      }
    );
  }
}

purchases.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>

【问题讨论】：

标签： jquery angular datatables angular-datatables

【解决方案1】：

我会尝试的一件事是cdr.detectChanges();（也就是说，通过private cdr: changeDetectorRef 在构造函数中导入chandeDetectorRef 并在设置this.purchaseorders 后调用detectchanges 方法

这可能是问题，因为服务是异步的，并且视图在完成之前呈现。这通常由特定事件的 Angular 自动处理（请参阅https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html），其中之一应该是 xhr 请求。

如果这不起作用，我会尝试使用生命周期挂钩，祝你好运！

【讨论】：

感谢您的回答，但它不起作用我会检查您提供的链接