2

Tengo un problema con ngx-datatable.

Actualmente tengo mi lista de datos que lleno después de un tiempo mediante una llamada un endpoint, esta lista se llena correctamente, el problema está en que mi ngx-datatable no renderiza los datos, aparece como si mi lista siguiera vacía. Lo más raro de todo es que si el array estuviera vacío mostraría un mensaje diciendo "No hay registros" Pero no es el caso, una vez se llena el array el mensaje "No hay registros" no aparece porque se supone que el array se llenó. No sé que pasa con esto.

<ngx-datatable
        #tableMarcas
        class="bootstrap expandable virtualized"
        [rows]="marcas"
        [columnMode]="innerWidth > 520 ? columnMode.flex : columnMode.force"
        [loadingIndicator]="cargandoDatos"
        [headerHeight]="50"
        [footerHeight]="50"
        rowHeight="auto"
        [externalPaging]="true"
        [offset]="paginaActual"
        [limit]="registrosPorPagina"
        [count]="registrosTotales"
        [scrollbarH]="innerWidth > 1120 ? false : true"
        [messages]="{emptyMessage: 'No hay registros', totalMessage: 'total'}"
      >
        <ngx-datatable-column name="Item" [flexGrow]="0.3">
          <ng-template let-row="row" ngx-datatable-cell-template>
            <div class="ajustar-contenedor centrar-contenido-verticalmente">
              {{ row.Id }}
            </div>
          </ng-template>
        </ngx-datatable-column>

        <ngx-datatable-column name="Marca" [flexGrow]="1">
          <ng-template let-row="row" ngx-datatable-cell-template>
            <div class="ajustar-contenedor centrar-contenido-verticalmente">
              {{ row.Nombre }}
            </div>
          </ng-template>
        </ngx-datatable-column>

        <ngx-datatable-column
          name="Opciones"
          [flexGrow]="0.3"
          [sortable]="false"
          headerClass="header-datatable-center"
        >
          
          
          <ng-template let-row="row" ngx-datatable-cell-template>
            <div #firstChild class="ajustar-contenedor centrar-contenido text-center">
              <div class="w-100 d-flex justify-content-center align-items-center">
                <div style="border: none;" class="btn btn-sm btn-outline-info">
                  <i class="mdi mdi-pencil-outline font-size-20" (click)="openModalMarca(modalMarca, row)"></i>
                </div>
                <div style="border: none;" class="btn btn-sm btn-outline-danger">
                  <i class="mdi mdi-trash-can-outline font-size-20" (click)="eliminarMarca(row.Nombre, row.Id)"></i>
                </div>
              </div>
            </div>
          </ng-template>
        </ngx-datatable-column>
        <!-- Footer -->
        <ngx-datatable-footer>
          <ng-template
            ngx-datatable-footer-template
            let-rowCount="rowCount"
            let-pageSize="pageSize"
            let-selectedCount="selectedCount"
            let-curPage="curPage"
            let-offset="offset"
            let-isVisible="isVisible"
          >
            <div *ngIf="innerWidth > 430" class="page-count">
              {{ rowCount }} Registros
            </div>
            <datatable-pager
              [pagerLeftArrowIcon]="'datatable-icon-left'"
              [pagerRightArrowIcon]="'datatable-icon-right'"
              [pagerPreviousIcon]="'datatable-icon-prev'"
              [pagerNextIcon]="'datatable-icon-skip'"
              [page]="curPage"
              [size]="pageSize"
              [count]="rowCount"
              [hidden]="!((rowCount / pageSize) > 1)"
              (change)="setPage($event)"
            >
            </datatable-pager>
          </ng-template>
        </ngx-datatable-footer>
      </ngx-datatable>

constructor(private productosService: ProductosService) {
    this.cargarMarcas();
  }

cargarMarcas() {
    this.marcas = [];
    this.cargandoDatos = true;
    const pagina = this.paginaActual + 1;
    this.productosService.cargarMarcas(pagina, this.registrosPorPagina).subscribe(
      (response: any) => {
        this.marcas = response.data;
        this.cargandoDatos = false;
      }
    );
  }

introducir la descripción de la imagen aquí

1 respuesta 1

0

Problema resuelto, No me había fijado y ngx-datatable requiere si o si la cantidad de datos que debe renderizar

[count]="registrosTotales"

y dicha variable no la estaba llenando, sin especificar los datos que debe renderizar los datos no se visualizaran.

this.productosService.cargarMarcas(query).subscribe(
      (response: any) => {
        if (response.data.length ) {
          this.marcas = response.data;
        }
        this.registrosTotales = response.cantidadRegistros || response.data.length;
        this.cargandoDatos = false;
      }
    );

introducir la descripción de la imagen aquí

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.