时间戳

首页 > 解决方案 > 基于输入的角度重新渲染数据表

javascript - 基于输入的角度重新渲染数据表

问题描述

我有一个包含 3 个组件的组件。其中一个组件是可单击的 DataTable（实例化为初始值），单击新行时，它会发出由其他 2 个组件接收的输出值，该值应相应更新。对于其他 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);
    }
  }

}

标签： javascriptangulardatatable

解决方案

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

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

推荐阅读