1

A datatable apresenta um erro após eu deletar um item da tabela, a mensagem inclui um site que eh este: Cannot reinitialise Datatable

Pensei em alguma maneira de "sair e voltar" da página para atualizar a tabela, mas não tive sucesso. O teste que não deu certo foi com o "this.router.navigate(['modulos']);"

Cheguei a conclusão de que eu devo inserir algum comando na função "getList()" ou "delete()".

Modulos.component.ts

import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
import { Router } from "@angular/router";
import { Subject } from 'rxjs';

import { Modulos } from '../../interface/modulos';
import { ModulosService } from '../../services/modulos.service';

@Component({
  selector: 'app-modulo',
  templateUrl: './modulos.component.html',
  styleUrls: ['./modulos.component.css']
})
export class ModulosComponent implements OnDestroy, OnInit {

  public modulos: Modulos[];
  deleteModalRef: BsModalRef;
  deleteId: number;
  dtOptions: DataTables.Settings = {};
  dtTrigger: Subject<any> = new Subject();

  @ViewChild('deleteModal') deleteModal;

  constructor(private modulosService: ModulosService,
              private bsModalService: BsModalService,
              private router: Router) { }

  ngOnInit() {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 10
    };

    this.getList();
  }

  getList() {
    this.modulosService.getList().subscribe(
      (modulos: Modulos[]) => {this.modulos = modulos; this.dtTrigger.next();}, //this.dtTrigger.next();
      (error) => {console.log(error); }
    );
  }
  ngOnDestroy(): void {
    // Do not forget to unsubscribe the event
    this.dtTrigger.unsubscribe();

  }
  onDelete(id: number) {
    this.deleteId = id;
    this.deleteModalRef = this.bsModalService.show(this.deleteModal, {class: 'modal-sm'});
  }
  onConfirmDelete() {
    this.delete(this.deleteId);
    this.deleteModalRef.hide();
  }
  onDeclineDelete() {
    this.deleteModalRef.hide();
  }
  private delete(id: number) {
    this.modulosService.delete(id).subscribe(
      (response) => {console.log(response); this.router.navigate(['modulos']); },
      (error) => {console.log(error); }
    );
  }
}

Modulos.component.html

<h4 class="m-3"> Modulos</h4>
<nav class="nav">
    <button class="btn btn-success m-3" [routerLink]="['new']">Criar Módulo</button>
</nav>
<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table table-light mx-3 text-secondary">
  <thead class="thead-light">
    <tr>
      <th>ID</th>
      <th>Nome</th>
      <th>Descrição</th>
      <th>Sistema</th>
      <th>Setor</th>
      <th>Modulo Pai</th>
      <th>Ações</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let m of modulos">
      <th>{{ m.id_modulo }}</th>
      <th>{{ m.nome_modulo }}</th>
      <th>{{ m.descricao }}</th>
      <th>{{ m.nome_sistema }}</th>
      <th>{{ m.nome_setor }}</th>
      <th>{{ m.nome_modulo_pai }}</th>
      <th><button class="btn btn-sm btn-info mr-2" [routerLink]="[m.id_modulo, 'edit']">Editar</button>
        <button class="btn btn-sm btn-danger mr-2" (click)="onDelete(m.id_modulo)">Deletar</button>
        <button class="btn btn-sm btn-secondary" [routerLink]="[m.id_modulo, 'add']">Criar Formulário</button>
      </th>
    </tr>
  </tbody>
</table>

<ng-template #deleteModal>
  <div class="modal-body text-center">
    <p>Tem certeza que quer deletar?</p>
    <button type="button" class="btn btn-default" (click)="onConfirmDelete()">Sim</button>
    <button type="button" class="btn btn-primary" (click)="onDeclineDelete()">Não</button>
  </div>
</ng-template>

Modulos-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ModulosComponent } from './modulos.component';
import { ModulosFormComponent } from './modulos-form/modulos-form.component';
import { ModulosShortcutComponent } from './modulos-shortcut/modulos-shortcut.component';

const routes: Routes = [
  { path: '', component: ModulosComponent},
  { path: 'new', component: ModulosFormComponent},
  { path: ':id/edit', component: ModulosFormComponent},
  { path: ':id/add', component: ModulosShortcutComponent},
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ModulosRoutingModule { }

1
  • Eu pesquisei, editei, testei e não funcionou a atualização da datatables. Se alguém souber, por favor, deixe um comentário ou uma resposta para ajudar a solucionar esse problema. Commented 8/05/2019 às 18:50

2 Respostas 2

3

Olá, você pode tentar atualizar a tabela utilizando o setTimeout(), utilize um *ngIf="show" (na table) e uma variável boolean, onde ela vai fazer com que a tabela apareça e desapareça do DOM.

Por exemplo:

att() {
thiS.getList() // para atualizar o dados do array
  this.show = false // tirar tabela do DOM
    setTimeout(() => {
      this.show = true // retorna com tabela para o DOM e os dados atualizados do 
                          this.getList()
    }, 50);
}
3
  • 1
    Funcionou, muito obrigado pela ajuda! Commented 18/06/2019 às 18:53
  • 1
    Valeu, amigo. Eu estava com o mesmo problema esses dias, só consegui resolver desta maneira. Poderia marcar a resposta como útil? Commented 18/06/2019 às 19:04
  • 1
    Da um Up na postagem pra ajudar tbm! Valeu! Commented 19/06/2019 às 14:18
2

Olá, a resposta do Edson funcionou mas eu reservei e pesquisei por outras soluções por conta do "piscado na tela", quando some a tabela e mostra novamente.

Então eu fui testando e essa solução funcionou pra mim, sem "piscar" a tabela:

excluir(id: number) {
   this.listaQuePopulaATabela = this.listaQuePopulaATabela.filter(item => item.id != id);
}
1
  • 1
    @cassiooliveira depois de muitos anos, eu também cheguei nessa solução, mas nem lembrava mais dessa pergunta Commented 16/04/2022 às 14:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .