Отчеты в реальном времени из REST API с использованием datatables.net для Angular 7 - PullRequest
Новая
       19

Отчеты в реальном времени из REST API с использованием datatables.net для Angular 7

0 голосов
/ 24 февраля 2019

Можно ли создавать отчеты в режиме реального времени, используя библиотеку datatables.net для таблицы в Angular 7 через REST API?Идея заключается в том, чтобы каждые 5 секунд делать запрос API и соответственно обновлять таблицу.

1 Ответ

0 голосов
/ 01 марта 2019

Да, это возможно.Вы можете использовать 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();
    });
}

Вы можете избежать дополнительной перерисовки, если добавите какой-либо индикатор (временную метку, контрольную сумму и т. Д.), Который можетсказать, если данные были изменены

...