Angular数据表-不重新渲染thead / columns数据

如何解决Angular数据表-不重新渲染thead / columns数据

我要做的是使同事的以前的代码动态化角度数据表的列。但是当我用新数据更新数据表时，行重新成功渲染，但是新列无法渲染。导致行加载到数据表中，但旧列导致错误：“无法读取未定义的属性mData”

我做错什么了吗？

这是我的代码：-

Datatable.html

<table *ngIf="entityDataObj != null && keyz != null"  datatable  [dtOptions]="dtOptions"  
[dtTrigger]="dtTrigger" class="table hover order-column" width="100%" >
<thead class="dtthead" style="text-transform: initial !important;">
<tr>
  <th class="tdVAlignMiddle"> </th>
   <ng-container *ngFor="let header of keyz" >
   <th *ngIf="sNavId == staticTables.Attachments && !uiSettings && !hideColumns.includes(header) " 
   class="tdVAlignMiddle">{{ header | spaceAddBeforeCapital}}</th> 
   <th *ngIf="initWithData && !uiSettings" class="tdVAlignMiddle">{{ header | spaceAddBeforeCapital}} 
    </th>
    <th *ngIf="uiSettings && uiSettings[header] && fieldKeys.includes(header)" 
      class="tdVAlignMiddle">
      {{ (uiSettings[header]["label"] && uiSettings[header]["label"] != "")
      ? uiSettings[header]["label"] : (header | spaceAddBeforeCapital) }}
    </th>
  </ng-container>
  <th *ngIf="showActions || showLink" class="tdVAlignMiddle" ></th>
</tr>
</thead>
<tbody>
 <tr *ngFor="let item of entityDataObj;let ind = index">
    <td style="width: 40px;" class="tdVAlignMiddle">1</td>
    <ng-container *ngFor="let objKey of _object.keys(item)" >

      <td *ngIf="uiSettings && uiSettings[objKey] && fieldKeys.includes(objKey)" 
       class="tdVAlignMiddle">
        ....

Datatable.component.ts

ngOnInit(): void {
this.dtOptions = {
  pagingType: 'full_numbers',pageLength: 10,paging : this.pagable,ordering: this.commonService.getSort(),searching: this.searchable,lengthMenu: [10,25,50,100],scrollY: this.height && this.height !== "" ? this.height : "500px",scrollCollapse: true,info: false,// Bug#423,Bug#424 & Bug#425 fixing
  columnDefs: [{
    orderable: false,targets: [0,this.lastColumnIndex]
  }],order: [[0,'']],drawCallback: () => {  
    if (this.dtElement) {
      this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
        
        dtInstance.column(0).nodes().each((cell,i) => {
            cell.innerHTML = i+1;
        });
        
      });
    }
  }
  //
};


getDataByApi(entity,id?,subEntity?,subEntityName?) {
console.log('getDataByApi');
console.log(this.views);
console.log(entity + '-' + id + '-' + subEntity + '-' + subEntityName); 
console.log('---');
console.log(this.views);
setTimeout(() => { 
  this.commonService.showLoader();
},0);

console.log('this.showView');
console.log(this.showView);
var viewSettings = this.showView == null?true:false;

this.apiService.GetEntityData(entity,id,subEntity,null,viewSettings,subEntityName,this.showView).subscribe((res) => {

  console.log('GetEntitydata response');
  console.log(res);

  if (res['status'] == Status.Success && res['data']['result'].length > 0) {


    this.entityDataObj = res['data']['result'];
    this.keyz = Object.keys(this.entityDataObj[0]);
    console.log(Object.keys(this.entityDataObj[0]));

  } else {
    this.entityDataObj = null;
  }

  //Re-initiate Datatable
  //this.initDatatable(); 
  console.log('reinitiateDatatable');
  console.log(this.uiSettings);
  //this.dtTrigger.next();
  //this.dtTrigger.next();
  this.reinitiateDatatable();

reinitiateDatatable(){
console.log('reinitiateDatatablezz');
console.log('this.dtElement');
console.log(this.dtElement);
if (this.dtElement && this.dtElement.dtInstance) {
 
  this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
    // Destroy the table first
    console.log('destroying');
    dtInstance.destroy();
    console.log('---');
    // Call the dtTrigger to rerender again
    //this.dtTrigger.next();
    setTimeout(() => {
    
      this.dtTrigger.next();
   },50);        
  });
} else {
  setTimeout(() => {
    
     this.dtTrigger.next();
  },50);
}