【发布时间】：2019-11-07 00:02:25
【问题描述】：
我有一个带有简单 CRUD 功能的 Angular 应用程序。我已经用静态 HTML 表测试了我的数据，这很有效。现在我正在使用一个名为 Angular 数据表的数据表框架。
链接：https://l-lin.github.io/angular-datatables/#/welcome
我可以创建、读取和删除记录，但执行此操作后我收到如下错误：
DataTables 警告：表 id=DataTables_Table_0 - 无法重新初始化 数据表。有关此错误的更多信息，请参阅 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 版本！
有人能指出正确的方向吗？
【问题讨论】：
标签： jquery html angular typescript datatable