如何使用 Angular2+ 动态替换数据表中的所有列？

Question

我要求在数据表之外发生更改/事件时替换所有列。

数据表第一次显示选定的列（来自事件）。如果我选择第二个，它不会显示，但 dtOptions 中的列会发生变化，但不会显示。我想清除视图问题，但我尝试使用销毁它对我不起作用。有人请帮助我实现这一目标。

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();
    });
  }

}

我已经根据我的要求创建了 stackblitz。在这个例子中，变量被调用columnsDataObj并且dataUrl会动态改变。它应该反映在数据表中。如果您需要更多详细信息，请告诉我：

https://stackblitz.com/edit/angular-datatables-gitter-4tavmk?file=app/app.component.ts

Answer 1

您还需要从模板中“销毁” 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()需要调用，这样的生命周期挂钩关于变更通知。

这是您按预期工作的示例：

https://stackblitz.com/edit/how-to-replace-all-the-columns-dynamically-in-data-table?file=app/app.component.ts