ANGULAR6-通过下拉菜单选择中的API调用刷新数据表

Question

我刚开始在Angular 6项目之一中使用数据表，当我通过下拉菜单中的选择刷新表时，我真的迷失了。

这是我的应用程序以及我想做的事的预览。

因此，首先我在下拉列表中选择一个触发API调用的值。结果是将在我的表中显示的数据数组。事情就是这样，我不知道数组的结构，因为数据来自XLS文档，由NodeJS后端以JSON格式转换。

每个XLS文档都不同，因此我必须在表中构建列和行。当我想显示Bootstrap表时，这非常正常。

但是，我确实希望该引导表具有数据表功能，例如搜索和分页。

使用下面的代码，只有在下拉菜单中的第一次选择时，我才能显示具有Datatable功能的表。

如果我在列表中选择其他值，则会重新加载我的表，但不会重新加载数据表功能，并且会出现错误：

  

DataTables警告：表ID = DataTables_Table_0-无法重新初始化DataTable。有关此错误的更多信息，请参见http://datatables.net/tn/3

（是的，我去了这个网站，但找不到任何有帮助的东西）

当函数被触发时，我不知道如何用新数据重新创建表。

好几天以来，我一直很讨厌，而且我尝试了很多在网上看到的事情，以至于我没主意。

如果你们有解决方案，您将救我！

代码：

HTML

<table datatable id="DataTables_Table_0"  [dtTrigger]="dtTrigger" class="table table-hover table-striped table-bordered table-condensed">
<caption>Liste des véhicules dans la BDD</caption>
<thead class="thead-dark">
  <tr>
    <th  *ngFor="let title of tabTitreColonnesXLS" data-field="title">{{title}}</th>
  </tr>
</thead>
<tbody>
  <tr *ngFor="let _xlsLignes of tabLignesXLS">
    <td *ngFor="let _data of _xlsLignes">{{_data}}</td>
  </tr>
</tbody>

TYPESCRIPT组件

import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { DataTableDirective } from 'angular-datatables';
import { Subject }            from 'rxjs';

@Component({
  selector: 'app-datatable-imports',
  templateUrl: './datatable-imports.component.html',
  styleUrls: ['./datatable-imports.component.css']
})

export class DatatableImportsComponent implements  OnInit ,AfterViewInit{
  @ViewChild(DataTableDirective)
  dtElement: DataTableDirective;

  dtOptions: DataTables.Settings = {};
  dtTrigger: Subject<any> = new Subject();
  public tabLignesXLS:any;
  public tabTitreColonnesXLS:any;

  ngOnInit(): void {

  }

  ngAfterViewInit() {

  }

  public AfficherContenuXLS(data){
    //data come API call from an other component which call this one as Viewchild 
    this.tabLignesXLS=[];
    this.tabTitreColonnesXLS=[];
    //Titre des colonnes
    let obj = data[0]
    let _tabTitreColonnesXLS = Object.keys(obj)

    for (var x in _tabTitreColonnesXLS){
      this.tabTitreColonnesXLS.push(_tabTitreColonnesXLS[x])
    }
    //Données des colonnes
    let _XLS = data
    for (var _xlsLignes in _XLS){
      let _xlsLignesSansEntete = Object.values(_XLS[_xlsLignes]) 
      let _tabCellulesXLS:any=[] 
      for ( var _xlsCelulleLigne in _xlsLignesSansEntete ){
        _tabCellulesXLS.push(_xlsLignesSansEntete[_xlsCelulleLigne])
      }
      this.tabLignesXLS.push( _tabCellulesXLS ) 
    }

    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
      // Destroy the table first
      dtInstance.destroy();
      // Call the dtTrigger to rerender again
    });


  }

}