基于输入的角度重新渲染数据表答案

【问题标题】：Angular Re-Render DataTable based on Input基于输入的角度重新渲染数据表
【发布时间】：2021-06-04 01:37:08
【问题描述】：

我有一个包含 3 个包含组件的组件。其中一个组件是可单击的 DataTable（实例化为初始值），单击新行时，它会发出一个输出值，由其他 2 个组件接收，该值应相应更新。对于其他两个组件中涉及的图形，我可以正常运行，但是我无法让它在其中一个组件中重新渲染 DataTable。每次点击我的数据都是正确的，但是DataTable似乎一键落后（例如，当我默认为State1时，表中没有数据显示，但当我点击进入State2时，会显示来自State1的数据等。

我的大部分代码都在下面（不包括一些标题）。我构造了一个引用相关 HTML（数据表）的 DataTableDirective，指定我的 Input（从另一个未图示的组件发出），将我的 dtOptions 初始化为一个空的 DataTable，实例化我的 dtTrigger，然后指定相关方法（ngOnChanges 将重新调用API 并获取新数据，然后将其重新渲染到 DataTable 中）。

        <div class="card-body text-dark">
          <table datatable id="typesTable" class="table table-striped table-bordered display responsive"
          style="width:100%" [dtOptions]="dtOptions" [dtTrigger]="dtTrigger"></table>
        </div>

export class TypesComponent implements OnChanges {

  constructor(private elementRef: ElementRef) { }
  @ViewChild(DataTableDirective, {static: false})
  dtElement: DataTableDirective;

  @Input() stateCounty: string;  // format "NY-NewYork"
  dtOptions: any = {
    data: [
    ],
    columns: [
      {title: 'Col1', data: 'Col1'},
      {title: 'Col2', data: 'Col2'}
    ],
    order: [['1', 'desc']],
    pagingType: 'full_numbers',
    processing: true,
    dom: 'Bfrtip',
    buttons: [ 'csv', 'excel' ],
  };

  dtTrigger: Subject<any> = new Subject();

  async ngOnChanges(changes: SimpleChanges): Promise<void> {
    const baseUrl = 'https://baseurl.com';
    // make the graph
    const state = changes.stateCounty.currentValue.split('-')[0];
    const city = changes.stateCounty.currentValue.split('-')[1];
    let graph = this.elementRef.nativeElement.querySelector('#timeDiv');
    graph.innerText = `Loading...`;

    let types = await fetchRetry(baseUrl + `api=${state}&city=${city}`);
    types = await types.json();

    ...
    graph.innerText = '';
    graph = Plotly.newPlot(graph, data, layout);
    ...

    this.dtOptions = {
      data: types,
      columns: [
        {title: 'Col1', data: 'Col1'},
        {title: 'Col2', data: 'Col2'}
      ],
      order: [['1', 'desc']],
      pagingType: 'full_numbers',
      processing: true,
      dom: 'Bfrtip',
      buttons: [ 'csv', 'excel' ],
    };
    this.rerender();

  }

  ngOnInit(){}

  ngAfterViewInit(): void {
    this.dtTrigger.next();
  }

  ngOnDestroy(): void {
    this.dtTrigger.unsubscribe();
  }

  rerender(): void {
    try {
      this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
        dtInstance.destroy();
        this.dtTrigger.next();
      });
    } catch (err) {
      console.log(err);
    }
  }

}

【问题讨论】：

你能把问题复制到stackblitz.com

标签： javascript angular datatable

【解决方案1】：

可能是新元素推送到表时表数据未更新。我认为这个问题与 ngFor 数组对象在将新元素推送到数组时无法更新 DOM 相同。

请参考此链接Angular2: *ngFor does not update when array is updated 这是我的假设，不是您问题的实际解决方案。

【讨论】：