jquery Angular DataTable在页面访问时不显示数据，直到我重新加载页面

kq0g1dla 于 2022-11-22 发布在 jQuery

关注(0)|答案(2)|浏览(200)

我开始学习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

来源：https://stackoverflow.com/questions/63431057/angular-datatable-not-showing-data-on-page-access-but-until-i-reload-the-page

2条答案

按热度按时间

ut6juiuv1#

我会尝试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请求。
如果这不起作用，我会做生命周期挂钩的实验，祝你好运！

赞(0）回复(0）举报 2022-11-22

tzcvj98z2#

您可以使用属性dtTrigger在收到数据后手动触发数据表的呈现。
purchases.component.ts

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

@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 = {};
  dtTrigger: Subject<any> = new Subject<any>(); //Ensuring the data is fetched first

  ngOnInit(): void {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 5,
      processing: true,
      language: {
        'url': '../../assets/English.json'
      }
    };

    this.purchaseService.getOrders().subscribe((data) => {
      this.purchaseOrders = data;  //First, we receive the data

      this.dtTrigger.next(true);  //Then, we manually trigger the table to render
    }, (err) => {
      console.log('-----> err', err);
    });
  }

  ngOnDestroy(): void {
    this.dtTrigger.unsubscribe(); //Unsubscribe from an event we only need once
  }
}

purchases.component.html

<table id="purchaseOrders" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger">
  <!-- Rest of HTML here -->
</table>

另外，我建议您在使用ng add angular-datatables添加数据表后，不要忘记安装所有必需的库。

npm install jquery --save
npm install datatables.net --save
npm install datatables.net-dt --save
npm install angular-datatables --save
npm install @types/jquery --save-dev
npm install @types/datatables.net --save-dev

之后，您需要在angular.json中包含以下内容。

...
"styles": [
  "node_modules/datatables.net-dt/css/jquery.dataTables.css",
  ...
],
"scripts": [
  "node_modules/jquery/dist/jquery.js",
  "node_modules/datatables.net/js/jquery.dataTables.js",
  ...
],
...

以下链接包含使其正常工作所需的所有信息：Angular 数据表文档

赞(0）回复(0）举报 2022-11-22

我来回答

jquery Angular DataTable在页面访问时不显示数据，直到我重新加载页面

2条答案

相关问题

热门标签

最新问答