Question

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

示例代码：

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 Element声明给在同一页面中运行的另一个组件。解决方案是创建外部（全局）服务并传递所有组件变量。然后使用组件变量和子变量运行服务中的所有功能。

谢谢大家... =）

Answer 2

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

angular-datatables/#/advanced/rerender

Answer 3

数据表刷新
点击按钮并刷新表格网格

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

外部过滤后，Angular 6 Datatable刷新表中的数据

3 个答案: