jQuery Datatables не работает в Angular 9 - PullRequest
Новая
       30

jQuery Datatables не работает в Angular 9

0 голосов
/ 22 апреля 2020

Я noob в Angular 9, и я начал использовать таблицы данных, я видел много уроков о том, как установить и использовать таблицы данных с Angular, но у меня возникли проблемы. Все работает отлично, datatables работает нормально, проблема в том, что, если заполнить таблицу результатами, datatable показать пустую строку в заголовке и показать строку без данных, доступных в таблице, и показать результаты тоже, это код, который я ' м, используя

enter image description here

HTML: 

<table class="display" datatable [dtOptions]="dtOptions" style="width:100%">
      <thead>
        <tr>
          <th>Acciones</th>
          <th>Nombre</th>
          <th>Facultad</th>
          <th>Pagina Web</th>
          <th>Categoria Colciencias</th>
          <th>Sitio web Colciencias</th>
          <th>Estado</th>
        </tr>
      </thead>
      <tr *ngFor="let g of listGrupos">
        <td>
          <a class="btn btn-warning text-white" (click)="onEdit(g)">
            <span><svg class="icon icon-abajo"><use xlink:href="../assets/iconos.svg#icon-editar"></use></svg></span>
          </a>
        </td>
        <td>{{g.nombre}}</td>
        <td>{{g.facultad.nombre}}</td>
        <td>{{g.paginaWeb}}</td>
        <td>{{g.catColciencias}}</td>
        <td>{{g.sitioColciencias}}</td>
        <td>{{g.activo ? 'Activo': 'Inactivo'}}</td>
      </tr>
      <tbody>
      </tbody>
    </table>

Мой компонент: 

import { DataTableDirective } from 'angular-datatables';

@ViewChild(DataTableDirective, { static: false });
dtElement: DataTableDirective;
dtOptions: DataTables.Settings = {};
dtTrigger: Subject<any> = new Subject(); 



 initDataTable() {
this.dtOptions = {
  lengthMenu: [[5, 10, 20, -1], [5, 10, 20, "Todos"]],
  pageLength: 10,
  pagingType: "full_numbers",
  scrollX: true,
  "language": {
    "url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/Spanish.json"
  },      
};
  }

  onSubmit() {
$('#processing').removeClass("escondido");
this.grupo = this.grupoListForm.value;
if (this.grupo.tipoBusqueda == 2 && this.grupo.nombre == "") {
  return;
}

this.bSearchActive = true;
this._grupoService.findBy(this.grupo).subscribe((result: any) => {
  this.listGrupos = result;      
  this.initDataTable();
  this.dtTrigger.next();
}, error => {

});
$('#processing').addClass("escondido");
}

I ' мы тоже использовали этот код, но не работали 

//ngOnDestroy(): void {
  //do not forget to unsubscribe the event
  //  //this.dttrigger.unsubscribe();
  //  throw new Error("Method not implemented.");
  //}

  //ngAfterViewInit(): void {
  //  this.dtTrigger.next();
  //}

  //reInitDataTable(): void {
  //  this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
  //    dtInstance.destroy();
  //    this.dtTrigger.next();
  //  });
  //}

Спасибо за вашу помощь

...