我要求在数据表之外发生更改/事件时替换所有列。
数据表首次显示选定的列（来自事件）。如果我选择第二个，它不会显示，但dtOptions中的列会更改，但不会显示。我认为清除问题是可行的，但是我尝试使用destroy却无法解决问题。有人请帮助我实现这一目标。
HTML代码：
<div id="data-table-grid-slide">
<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover"></table>
</div>
数据表的角度代码：
import {Component, ViewChild, OnInit, Input, AfterViewInit, OnDestroy, Output, EventEmitter} from '@angular/core';
import { DataTableDirective } from 'angular-datatables';
import { Subject } from 'rxjs';
import { ColumnObject } from '../data-tables-net/model/data-tables-model';
import { HttpClient } from '@angular/common/http';
import { DtServiceService} from '../data-tables-net/dt-service.service';
import { WindowRef} from '../services/WindowRef';
declare var $;
@Component({
selector: 'app-data-tables-net',
templateUrl: './data-tables-net.component.html',
styleUrls: ['./data-tables-net.component.css']
})
export class DataTablesNetComponent implements OnInit, AfterViewInit, OnDestroy {
@ViewChild('dataTable', {static: true}) table;
@ViewChild(DataTableDirective, {static: false}) dtElement: DataTableDirective;
dataTableColumn: Array<any> = [];
dtOptions: DataTables.Settings = {};
@Input() dataTableGrid: boolean;
@Input() tableShow: boolean;
@Output() tableShowChange = new EventEmitter<boolean>();
@Output() dataTableGridChange = new EventEmitter<boolean>();
dtTrigger: Subject<any> = new Subject();
// editor: any;
columnObject: ColumnObject = {
title: '',
data: ''
};
constructor(private http: HttpClient, private dtServiceService: DtServiceService, private winRef: WindowRef) { }
ngOnInit() {
this.dataTableGrid = true;
this.initDt();
}
ngAfterViewInit(): void {
// This method get called on pencil click of model in Data Model Visuvalizer
this.winRef.modelClick$.subscribe((modelObjAttributes) => {
this.dataTableGrid = true;
this.tableShow = false;
this.tableShowChange.emit(this.tableShow);
this.dataTableGridChange.emit(this.dataTableGrid);
console.log('modelObjAttributes', modelObjAttributes);
// tslint:disable-next-line: max-line-length
// this.dtOptions.columns = [{title: 'id', data: 'id'}, {title: 'name', data: 'name'}, {title: 'item code', data: 'item code'}, {title: 'addr', data: 'addr'}];
if (this.dtOptions.columns) {
// this.dtOptions.destroy = true;
// delete this.dtOptions.columns;
this.reRenderDataTable();
// console.log('columns', this.dtOptions.columns);
this.initDt();
this.dtOptions.columns = this.getModelDetails(modelObjAttributes);
// console.log(this.dtOptions.columns);
this.dtTrigger.next();
} else {
this.dtOptions.columns = this.getModelDetails(modelObjAttributes);
console.log(this.dtOptions.columns);
this.dtTrigger.next();
// this.dtOptions.destroy = true;
}
// delete this.dtOptions.columns;
});
}
initDt() {
this.dtOptions = {
// ajax: 'data/data.json',
// columns: [{title: 'Column1', data: 'column1'}],
paging: true,
searching: true,
ordering: true,
info: false,
responsive: true,
destroy: true
};
}
ngOnDestroy(): void {
// Do not forget to unsubscribe the event
this.dtTrigger.unsubscribe();
}
// This method used to get the details of model on clicking of pencil icon
getModelDetails(modelDetailsObj) {
return this.convertModelAttributesToDataTable(modelDetailsObj.options);
// this.getModelDetailsFromService(modelDetailsObj.id);
}
// This method is used to call the service to get the selected Models / Schema details from Database
getModelDetailsFromService(schemaId): void {
this.dtServiceService.getSelectedSchema(schemaId).subscribe(data => {
console.log(data);
},
error => {
console.log('Data is not getting');
});
}
// This method used to form the schema data for Data Table
convertModelAttributesToDataTable(attributesObject) {
this.dataTableColumn = [];
// delete this.dtOptions.columns;
for (const [index, obj] of attributesObject.entries()) {
if (obj) {
this.columnObject = { title: obj.text, data: obj.text};
console.log('columnObject', this.columnObject);
this.dataTableColumn.push(this.columnObject);
// console.log(this.dtOptions);
}
}
// this.dtTrigger.next();
return this.dataTableColumn;
}
// This method used re-render the data table with updated data's
reRenderDataTable(): void {
this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
// Destroy the table first
// dtInstance.destroy();
// Call the dtTrigger to rerender again
this.dtTrigger.next();
});
}
}
@@ bagya，只有在columnDataObj与以前的数据相同的情况下，您才能执行此操作，例如在所有动态数据中都应具有id，name，lastname，onURL的url更改时，应触发一个函数，其中将dtOptions重新分配喜欢这里
import { Component, VERSION } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html"
})
export class AppComponent {
version = "Angular: v" + VERSION.full;
dtOptions: DataTables.Settings = {};
columnsDataObj = [
{
title: "ID",
data: "id"
},
{
title: "First name",
data: "firstName"
},
{
title: "Last name",
data: "lastName"
}
];
dataUrl =
"https://raw.githubusercontent.com/l-lin/angular-datatables/master/demo/src/data/data.json";
ngOnInit(): void {
this.generateData();
}
generateData() {
this.dtOptions = {
ajax: this.dataUrl,
columns: this.columnsDataObj
};
}
updateData() {
console.log("update DT");
this.dataUrl = "newdatedata.json"
this.columnsDataObj = [
{
title: "Name",
data: "Name"
},
{
title: "IDx",
data: "idx"
},
{
title: "Last ",
data: "last"
}
];
this.dtOptions = {
ajax: this.dataUrl,
columns: this.columnsDataObj
};
}
}
您还需要从模板中“销毁” dtOptions和上一个表，并且还必须确保模板在更改完成后发出通知，这是主要更改：
首先完全销毁您以前的DT，我添加了一个名为dtRendered的标志：
dtRendered = true;
<table *ngIf="dtRendered" datatable [dtOptions]="dtOptions" class="row-border hover">
同样，在您的更新方法上，您必须确保所有内容都被销毁并再次初始化：
updateData() {
// destroy you current configuration
this.dtRendered = false
this.dtOptions = {
data: this.jsonData1.data,
columns: this.columnsDataObj1
};
// make sure your template notices it
this.cdr.detectChanges();
// initialize them again
this.dtRendered = true
this.cdr.detectChanges();
}
需要this.cdr.detectChanges()调用，因此lifecycle-hook会通知有关更改。
这是您的示例按预期工作：