jquery - 无法使用 Angular Datatable 重新初始化 DataTable

Question

我有一个带有简单 CRUD 功能的 Angular 应用程序。我已经使用静态 HTML 表测试了我的数据，这有效。现在我正在使用一个名为 Angular 数据表的数据表框架。

链接:https://l-lin.github.io/angular-datatables/#/welcome

我可以创建、读取和删除记录，但执行此操作后我收到如下错误:

DataTables warning: table id=DataTables_Table_0 - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

我尝试了几种解决方案，例如它提供的链接和其他堆栈溢出帖子，如下所示:

Getting error in Angular 5 Datatables: cannot reinitialise DataTable

https://l-lin.github.io/angular-datatables/#/basic/angular-way

https://l-lin.github.io/angular-datatables/#/advanced/rerender

这是我在 car-component.js 中的代码，我使用 car-services.js 来进行所有 HTTP 调用。

import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { CarService } from '../services/carservices/car.service';
import { CarVM } from '../viewmodels/car/car-vm';
import { Subject } from 'rxjs';
import { DataTableDirective } from 'angular-datatables';

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

  FormCar: any;
  countrecords: any;
  Carid: number = 0;
  dtTrigger: Subject<any> = new Subject();
  dtElement: DataTableDirective;
  allCars: CarVM[];
  dtOptions: DataTables.Settings = {};

  constructor(private formbuilder: FormBuilder, private carservice: CarService) { }

  ngOnInit() {

    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 5,
    };

    this.GetCar();
    this.GetCarCount();

    this.FormCar = this.formbuilder.group({
      CarId: ['', Validators.required],
      Brand: ['', Validators.required],
      Model: ['', Validators.required],
      Color: ['', Validators.required],
      TopSpeed: ['', Validators.required],
    });
  }

  AddCar(CarVM: CarVM) {
    CarVM.CarId = this.Carid;
    this.carservice.CreateCar(CarVM).subscribe(() => {
      this.GetCar();
      this.GetCarCount();
      this.Reset();
      this.Carid = 0;
    })
  }

  GetCar() {
    this.carservice.getAllCars().subscribe(res => {
      this.allCars = res;
      this.dtTrigger.next();
    })
  }

  GetCarCount() {
    this.countrecords = this.carservice.getCount();
  }

  EditCar(car: CarVM) {
    this.carservice.updateCar(car).subscribe(Response => {
      this.Carid = Response.CarId;
      this.FormCar.controls['Brand'].setValue(Response.Brand);
      this.FormCar.controls['Model'].setValue(Response.Model);
      this.FormCar.controls['Color'].setValue(Response.Color);
      this.FormCar.controls['TopSpeed'].setValue(Response.TopSpeed);
    })
  }

  DeleteCar(CarId: string) {
    if (confirm("Are you sure?")) {
      this.carservice.deleteCar(CarId).subscribe(() => {
        this.GetCar();
        this.GetCarCount();
      })
    }
  }

  Reset() {
    this.FormCar.reset();
  }
}

这是我在汽车上的 HTML 页面:

<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
  <thead>
    <tr>
      <th>Id</th>
      <th>Brand</th>
      <th>Model</th>
      <th>Color</th>
      <th>Speed</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let car of allCars">
      <td>{{car.carId}}</td>
      <td>{{car.brand}}</td>
      <td>{{car.model}}</td>
      <td>{{car.color}}</td>
      <td>{{car.topSpeed }}</td>
      <td>
        <button type="button" class="btn btn-danger mr-1" (click)="DeleteCar(car.carId)">Delete</button>
      </td>
    </tr>
  </tbody>
</table>

注意:

我使用的是Angular版本而不是JQuery版本!

有人能指出我正确的方向吗？

Answer 1

您需要在再次触发之前销毁数据表实例。

您可以创建这样的函数:

从' Angular 数据表'导入{DataTableDirective};

dtElement:DataTableDirective;

isDtInitialized:boolean = false

  GetCar() {
    this.carservice.getAllCars().subscribe(res => {
      this.allCars = res;

      if (this.isDtInitialized) {
        this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
          dtInstance.destroy();
          this.dtTrigger.next();
        });
      } else {
        this.isDtInitialized = true
        this.dtTrigger.next();
      }
    })
  }

使用这个，第一次会进入else block 并直接触发数据表。之后刷新时会先销毁数据表再触发。