angular - 如何在 Angular 11 单组件中编写多个数据表

Question

如何编写角度指令来呈现多个表

Answer 1

In ts file you import 

import { Component, OnInit, ChangeDetectorRef, ViewChild, ViewChildren, QueryList } from '@angular/core';
import { DataTableDirective } from 'angular-datatables';
import { Subject } from 'rxjs';

export class SoftwareComponent implements OnInit {

  @ViewChildren(DataTableDirective)
  dtElements: QueryList<DataTableDirective>;
  dtOptions: DataTables.Settings = {};
  dtTrigger1: Subject<any> = new Subject<any>();
  dtTrigger2: Subject<any> = new Subject<any>();
this.dtOptions = {
      processing: true,
      lengthMenu: [10, 100, 500],
      destroy: true,
      lengthChange: false,
      searching: false,
      order: [[1, "desc"]],
      language: {
        info: "&nbsp;_START_ to _END_ of _TOTAL_"
      }
    };
ngAfterViewInit(): void {
    this.dtTrigger1.next();
    this.dtTrigger2.next();
  }

  ngOnDestroy(): void {
    // Do not forget to unsubscribe the event
    this.dtTrigger1.unsubscribe();
    this.dtTrigger2.unsubscribe();
  }


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

  }

}

In Html File you call

    <table datatable class="table dataTable row-border"
                                                        [dtOptions]="dtOptions" [dtTrigger]="dtTrigger1">
    <thead>....</thead>
    <tbody>'''</tbody>
    </table>
    <table datatable class="table dataTable row-border"
                                                        [dtOptions]="dtOptions" [dtTrigger]="dtTrigger2">
    <thead>....</thead>
    <tbody>'''</tbody>
    </table>