要实现Angular Datatable每次搜索都不会更新表格数据,只有在刷新和重新搜索时才获取新数据,可以使用以下解决方法:
data: any[] = [];
ngOnInit() {
// 从API获取数据或者从本地存储中获取数据
this.getData();
}
getData() {
// 从API获取数据或者从本地存储中获取数据
// 将获取到的数据赋值给data变量
this.data = // 获取到的数据
}
Column 1
Column 2
Column 3
{{ item.column1 }}
{{ item.column2 }}
{{ item.column3 }}
import { Component, OnInit, ViewChild } from '@angular/core';
import { DataTableDirective } from 'angular-datatables';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
@ViewChild(DataTableDirective, { static: false }) datatableElement: DataTableDirective;
dtOptions: DataTables.Settings = {};
dtTrigger: Subject = new Subject();
ngOnInit() {
this.dtOptions = {
// 配置项
};
this.dtTrigger.next();
}
}
import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
import { DataTableDirective } from 'angular-datatables';
export class MyComponentComponent implements OnInit, OnDestroy {
@ViewChild(DataTableDirective, { static: false }) datatableElement: DataTableDirective;
dtTrigger: Subject = new Subject();
search() {
// 销毁Angular Datatable
this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
dtInstance.destroy();
this.dtTrigger.next();
});
// 更新表格数据,可以重新调用getData()方法获取新数据
this.getData();
}
ngOnDestroy(): void {
// 取消订阅dtTrigger
this.dtTrigger.unsubscribe();
}
}
这样,每次搜索时,会先销毁表格,然后重新获取新的数据,再重新初始化表格,实现每次搜索都不会更新表格数据的效果。