Angular Datatable动态列重新初始化问题

如何解决Angular Datatable动态列重新初始化问题

我有一个要求，当我提交表单时，动态表应显示更新的数据。我从服务器接收的数据可能包含任何类型的标头，所以我无法定义列。第一次数据表正确显示，而当我第二次提交表单时，出现以下错误。

core.js：4197错误TypeError：无法读取未定义的属性'mData'

，并且数据表未显示。 请帮忙。预先感谢。

export class TableComponent implements AfterViewInit,OnInit {
  detailsArray: any;
  tableArray: any;
  tableArrayRows: any[] = [];
  tableHeader: any;
  tableCommaRows: string[] = [];
  tableRows: any[] = [];
  tableRowsArray: any[] = [];

  @ViewChild(DataTableDirective,{ static: false }) datatableElement:       DataTableDirective;
  dtElement: DataTableDirective;
  dtOptions: any = {};
  dtInstance: DataTables.Api;
  dtTrigger: Subject<any> = new Subject();


  constructor (private http: HttpClient) { }

  ngOnInit(): void {
    this.dtOptions = {
      destroy: true,pagingType: 'full_numbers',pageLength: 25,processing: true,dom: 'Bfrtip',buttons: [
        'csv','excel','print',],};
  }


  onSubmit(tableForm) {
    this.apiCall();  
    }
  apiCall() {
    
      // HTTP call
      this.http.post(url,postedData,httpOptions).pipe().
          subscribe(data => {
              this.detailsArray = data
              /// Splitting the array at new line
                this.detailsArray = this.detailsArray.replaceAll('"','');
                this.tableArray = this.detailsArray.split(/\r?\n/);
                // Table header row
                this.tableHeader = this.tableArray[0].split(',');
                // Table body row
                this.tableRows = this.tableArray.splice(1,this.tableArray.length);
                this.tableRows = this.tableRows.map(x => x.split(','));
              if("dtInstance" in this.dtElement){
                this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
                  // Destroy the table first
                  dtInstance.destroy();
                 // Call the dtTrigger to rerender again
                  this.dtTrigger.next();
                });
              }
              else{
                this.dtTrigger.next();
              }
             });
          
      },(err: HttpErrorResponse) => {
              if (err.error instanceof Error) 
              {
                  // A client-side or network error occurred.
                  console.log('An error occurred:',err.error.message);
              } else {
                  // The backend returned an unsuccessful response code.
                  console.log(`Backend returned code ${err.status},body was: ${err.error}`);
              }
            });
         
      
  }
 
  ngOnDestroy(): void 
  {
    // Do not forget to unsubscribe the event
    this.dtTrigger.unsubscribe();
  }

  ngAfterViewInit() {

  // this.dtTrigger.next();
 //Giving error
  
}

<form #tableForm="ngForm" (ngSubmit)="onSubmit(tableForm)">
<table id="DataTables"  class="table table-striped table-bordered table-sm row-border hover" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger">
                        <thead>
                            <tr> 
                                <th *ngFor="let tableHeaders of tableHeader">{{tableHeaders}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let item of tableRows; let i = index">
                                <td *ngFor="let cell of item">
                                  {{ cell }}
                                </td>
                            </tr>
                        </tbody>
                    </table>
     </form>