Question

我在angular 7中使用打字稿，我想在一页中有两个数据表，并且我想为每个表提供一种重新渲染的方法，以便可以使用搜索栏，我知道数据表已经有一个搜索栏，但是我需要在每次搜索中分配数据数组，因为数据中有成千上万的行使数据表变得非常慢，因此通过搜索，我对数组进行了过滤以使其更快。

我已经知道如何使用dtElement，dtInstance.destroy（）重新呈现一个表。和dtTrigger.next（）;但是我不能使用两个表来工作。我在论坛上找到了此代码，但给了我这个错误，并且我不知道该怎么办，因为我没有使用JQuery：DataTables警告：table id = tablaClaveProdServ-无法重新初始化DataTable。有关此错误的更多信息，请参见http://datatables.net/tn/3

这是表1

<input type="text" class="form-control" placeholder="Busque una clave del catalogo SAT" (change)="buscarClaveProdServ()" [(ngModel)]="busquedaClaveProdServ">         
<div class="table-responsive table-wrapper-scroll-y">
    <table id="tablaClaveProdServ" datatable [dtOptions]="dtOptions['new']" [dtTrigger]="dtTrigger['new']" class="table table-hover">
        <thead>
            <tr>
                <th scope="col">Clave</th>
                <th scope="col">Descripción</th>
            </tr>
        </thead>
        <tbody>   
            <tr class="pointer" *ngFor="let dato of listaClaveProdServ;">
                <td scope="col">{{dato.clave}}</td>
                <td scope="col">{{dato.descripcion}}</td>
            </tr>
        </tbody>
    </table>
</div>

这是表2（几乎是同一张表，更改了数据数组）

<input type="text" class="form-control" placeholder="Busque una clave del catalogo SAT" (change)="buscarClaveUnidades()" [(ngModel)]="busquedaClaveUnidad">     
<div class="table-responsive table-wrapper-scroll-y">
    <table id="tablaClaveUnidad" datatable [dtOptions]="dtOptions['new']" [dtTrigger]="dtTrigger['new']" class="table table-hover">
        <thead>
            <tr>
                <th scope="col">Clave</th>
                <th scope="col">Descripción</th>
            </tr>
        </thead>
        <tbody>   
            <tr class="pointer" *ngFor="let dato of listaClaveUnidades;">
                <td scope="col">{{dato.clave}}</td>
                <td scope="col">{{dato.descripcion}}</td>
            </tr>
        </tbody>
    </table>
</div>

这是我的打字稿文件

export class FrmCatRegistroProductoComponent implements AfterViewInit, OnDestroy, OnInit {

  //data arrays
  listaClaveProdServ: Array<GenericModel>;
  listaClaveUnidad: Array<GenericModel>;

  //words to search
  busquedaClaveProdServ:string;
  busquedaClaveUnidad:string;

  @ViewChildren(DataTableDirective)
  dtElements: QueryList<DataTableDirective>;
  dtOptions: DataTables.Settings[] = [];
  dtTrigger: Subject<any>[] = [];

  constructor(
    private listas: GenericList) {
  }    

  ngOnInit(): void {
    this.dtTrigger["new"] = new Subject<any>();
    this.dtOptions['new'] = {
      pagingType: 'full_numbers',
      language: this.listas.dtEspanol,
      searching: false
    };
    this.listaClaveProdServ = [];
    this.listaClaveUnidad = [];
  }

  ngAfterViewInit(): void {
      this.dtTrigger['new'].next();    
  }
  ngOnDestroy(): void {
      this.dtTrigger['new'].unsubscribe();    
  }
  rerender():void{
    this.dtElements.forEach((dtElement: DataTableDirective) => {
      dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
        dtInstance.destroy();
        this.dtTrigger['new'].next();    
      });
    });
  }

  //the search methods
  buscarClaveProdServ():void{
    this.listaClaveProdServ = this.listas.ClaveProductoServicio.filter(o => o.descripcion.includes(this.busquedaClaveProdServ));
    this.rerender();
  }
  buscarClaveUnidades():void{
    this.listaClaveUnidad = this.listas.ClaveUnidad.filter(o => o.descripcion.includes(this.busquedaClaveUnidad));
    this.rerender();
  }
}

我还尝试了setTimeout（（）=> {...}）周围的dtTrigger；不成功。

希望有人可以帮助我，非常感谢，如果您读了这么远。

Answer 1

我在每个表上定义了单独的触发器：

<table #table1 datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger1">...

<table #table2 datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger2">...

然后像这样重新渲染：

  dtTrigger1: Subject<any> = new Subject();
  dtTrigger2: Subject<any> = new Subject();

  rerender(): void {     
    this.dtElements.forEach((dtElement: DataTableDirective) => {
      if(dtElement.dtInstance)
        dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
          dtInstance.destroy();          
      });
    });
    this.dtTrigger1.next(); 
    this.dtTrigger2.next();    
  }

利润！

Answer 2

通过在destroy:true中添加datatable options解决了我的问题。在您的ngOnInit()

中

ngOnInit(): void {
    this.dtTrigger["new"] = new Subject<any>();
    this.dtOptions['new'] = {
      pagingType: 'full_numbers',
      language: this.listas.dtEspanol,
      searching: false,
      destroy:true //Add to allow the datatable to destroy
    };
    this.listaClaveProdServ = [];
    this.listaClaveUnidad = [];
  }

如何使用打字稿重新呈现多个数据表？

2 个答案: