使用针对Angular 7的datatables.net从REST API进行实时报告

Question

是否可以通过REST API使用datatables.net库为Angular 7中的表进行实时报告？想法是每5秒发出一次api请求并相应地更新表。

Answer 1

对的，这是可能的。您可以使用rxjs定期调用API，并在每次收到数据时重新呈现datables.net表。

你的表格标记：

    <table id="datatables" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table table-striped table-no-bordered table-hover">
        <thead>
            <tr>
                <!--Headers here-->
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let tableItem of tableData">
                <!--Data columns here-->
            </tr>
        </tbody>
    </table>    

组件声明：

@ViewChild(DataTableDirective)
datatableElement: DataTableDirective;

dtOptions: DataTables.Settings = {};

dtTrigger: Subject<AppraisalGridItem[]> = new Subject<AppraisalGridItem[]>();

tableData: any[] = [];

//flag to indicate initial data assignment
isInitStage: boolean = true;

服务电话订阅：

    interval(5000).pipe(switchMap(() => this.yourService.getData()))
        .subscribe(data => {

            this.tableData= data;

            if (this.isInitStage) {
                this.dtTrigger.next();
                this.isInitStage = false;
            }
            else {
                this.rerenderTable();
            }          
        });

基本上你需要使用interval方法定期调用API，然后你需要管道通过switchMap来压缩输出并仅处理最新的结果。最后，对于后续请求（在第一个init之后），您需要先通过销毁它来重新渲染表：

rerenderTable(): void {
    this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
        dtInstance.destroy();
        this.dtTrigger.next();
    });
}

如果添加任何可以判断数据是否已更改的指示符（时间戳，校验和等），则可以避免额外重新呈现