Angular 6 Datatable 刷新table中的数据，经过外部过滤

Question

我正在尝试在请求后呈现 table 中的行。我可以在浏览器中看到响应，并且正在将新数据推送到行：对象，但是 table 没有刷新 table.

中的行

示例代码：

import {Component, OnDestroy, OnInit} from '@angular/core';
import { Subject } from 'rxjs';
import { XXXXXXXService } from './NAME.service';

@Component({
  selector: 'app-NAME',
  templateUrl: './NAME.component.html',
  styleUrls: ['./NAME.component.scss']
})
export class XXXXXXXComponent implements OnDestroy, OnInit {

  dtOptions: DataTables.Settings = {};
  rows = [];

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

  constructor(private XXXXXXXService: XXXXXXXService) { }

  ngOnInit(): void {
    this.rows.length = 0;

    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 25
    };
    this.class.getRows()
      .subscribe(rows => {
        console.log(rows);
        this.rows = rows;
        // Calling the DT trigger to manually render the table -- not working!!!
        this.dtTrigger.next();
      });
  }
  render_rows_filters(filter) {
    this.class.getRowsFiltered(filter).subscribe(
      rows => {
        this.rows = rows;
        this.dtTrigger.next();
      }
    );
  }
  ngOnDestroy(): void {
    this.dtTrigger.unsubscribe();
  }
}

html

<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table-bordered">
  <!--class="row-border table-bordered hover">-->
  <thead>
  <tr>
    <th>&nbsp;NAME</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let row of rows">
    <td>{{ row.Name }}</td>
  </tr>
  </tbody>
</table>

Answer 1

好的，问题是，当您将 angular 与组件和服务一起使用时，一个组件无法在同一页面中向另一个组件运行声明 DataTable 元素。解决方案是 创建一个外部（全局）服务 并传递所有组件变量。然后运行 服务中的所有函数以及组件变量和子变量 。

谢谢大家... =)

Answer 2

数据table刷新
点击按钮按下 table 网格刷新

$('#Clienttbl').dataTable().fnClearTable();

Answer 3

这是刷新搜索数据的最佳方式..或动态加载

angular-datatables/#/advanced/rerender

Angular 6 Datatable 刷新table中的数据，经过外部过滤

Angular 6 Datatable refresh data in table after outside filtering

html

datatable

render

angular

angular6