Angular 7 - перезагрузить данные в таблицу данных

Я использую angular 7 с угловыми данными. Я пытаюсь определить кнопку «перерисовать», чтобы перезагрузить данные как в этом примере.

Я не понимаю, что я должен поместить в функцию рендеринга:

Моя функция API:

fn_getFavoriteTables() {

  this._getFavoriteTablesApiCall =  this.getFavoriteTablesService.getFavoriteTables(Number(localStorage.getItem('UserID')), Number(localStorage.getItem('BranchID'))).pipe(takeUntil(this.destroySubject$)).subscribe(x => {
        this.getFavoriteTables = x;
        this.dtTrigger.next();
    });

};

функция повторного рендеринга:

rerender(): void {
    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
        // Destroy the table first 

        dtInstance.destroy();


        // Call the dtTrigger to rerender again
        this.dtTrigger.next();
    });
}

ngOnDestroy(): void {
  console.info('ngDestroy');
  // Do not forget to unsubscribe the event
  this.dtTrigger.unsubscribe();
}
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
4
0
6 249
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Нашел ответ, который сработал для меня: это исходный сайт

 rerender(): void {
    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
        // Destroy the table first 
        //debugger;
        var table = $('#favoriteTable').DataTable();

        $('#tableDestroy').on('click', function () {
            table.destroy();
        });

        dtInstance.destroy();

        this.fn_getFavoriteTables();

    });
}

Это также можно сделать так:

import { DataTableDirective } from 'angular-datatables';

dtElement: DataTableDirective;
dtInstance: Promise<DataTables.Api>;

rerender(): void  {
  this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
    dtInstance.ajax.reload()
  });
}

Я пробовал это решение, но оно не может найти пространство имен DataTables.Api. Я импортировал DatatablesModule, а также типы/datatablesnet и ничего... Я использую версию 9.0.2 datatables

user10484617 10.08.2020 17:54

Вы можете использовать API DataTable destroy() для удаления таблицы и повторного использования dtTrigger для повторного рендеринга таблицы. Пожалуйста, проверьте ссылку ниже.

https://l-lin.github.io/angular-datatables/#/advanced/rerender

Другие вопросы по теме