Question

Angular 7

“ datatables.net-dt”：“ ^ 1.10.19”，

import { Component, OnInit,Injectable ,AfterViewInit,ViewChild,OnDestroy} from '@angular/core';
import { Title } from '@angular/platform-browser';
import { HttpClient } from '@angular/common/http';
import { DataTableDirective } from 'angular-datatables';

import { Subject } from 'rxjs';

class DataTablesResponse {
  data: any[];
  draw: number;
  recordsFiltered: number;
  recordsTotal: number;
}

@Component({
 selector: 'app-cheques',
 templateUrl: './cheques.component.html',
 styleUrls: ['./cheques.component.css']
})

export class ChequesComponent implements AfterViewInit,OnDestroy,OnInit {
  @ViewChild(DataTableDirective)
  public openForm = 0;
  dtOptions: DataTables.Settings = {};
  cheques: Cheque[] = [];
  dtElement: DataTableDirective;
  dtTrigger: Subject<any> = new Subject();

  constructor(private title: Title,private http: HttpClient) { }

  ngOnInit() {
   this.title.setTitle('WalletCheques - Cheques');
   const that = this;

   this.dtOptions = {
    pagingType: 'full_numbers',
    pageLength: 10,
    serverSide: true,
    processing: false,
    ajax: (dataTablesParameters: any, callback) => {
    that.http
      .post<DataTablesResponse>(
        'http://localhost/wallet-cheques/api/get-cheques',
        dataTablesParameters, {}
      ).subscribe(resp => {
        that.cheques = resp.data;

        callback({
          recordsTotal: resp.recordsTotal,
          recordsFiltered: resp.recordsFiltered,
          data: []
        });
      });
  },
  columns: [
    { data: 'cheque_id',orderable: false},
    { data: 'amount',orderable: false},
    { data: 'lastName',orderable: false }
  ]
 }
}


rerender(): void {
  this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
  // Destroy the table first
  dtInstance.destroy();
  // Call the dtTrigger to rerender again
  this.dtTrigger.next();
 });
}

我想在单击按钮时像绘制方法I一样刷新表格。

文档出错，例如 ChequesComponent.html：20错误TypeError：无法读取未定义的属性'dtInstance'

Angular Datatables在按钮单击中手动重新加载（绘制）表

0 个答案: