NZ-Table of NG-Zorro doesn't show any data

Question

I'm developing a page where I use a table from ng-zorro, I get the data from an API, but after I filtered the Data the table just show the "No data" display, not showing neither the pagination nor the data per page. Did I miss some async procedure to get my data and the table read the data response? The HTML code from my component:

<nz-table #basicTable
  nzBordered
  [nzShowSizeChanger]="true"
  [nzHideOnSinglePage]="false"
  [nzData]="filteredData"
  [nzFrontPagination]="false"
  [nzLoading]="loading"
  [nzTotal]="lastPage"
  [nzPageSize]="dataPerPage"
  [nzPageIndex]="currentPage"
  [nzPageSizeOptions]="[10, 25, 50, 75, 100]"
>
  <thead>
    <tr>
      <th>Puntaje de exposicion</th>
      <th>Nombre de Dominio</th>
      <th>Contiene Agente</th>
      <th>Direccion IPv4</th>
      <th>Direccion IPv6</th>
      <th>Ultima Vez Visto</th>
      <th>Sistema Operativo</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of basicTable.data">
      <td>{{data.exposureScore}}</td>
      <td>{{data.fqdn}}</td>
      <td>{{data.hasAgent}}</td>
      <td>{{data.ipv4}}</td>
      <td>{{data.ipv6}}</td>
      <td>{{data.lastSeen | date: 'dd/MM/YYYY'}}</td>
      <td>{{data.operatingSystem}}</td>
    </tr>
  </tbody>
</nz-table>

The Component.ts

import {Component, OnInit} from '@angular/core';
import {TableAssetsService} from "../../../core/services/table-assets.service";

@Component({
  selector: 'app-table-tenable',
  templateUrl: './table-tenable.component.html',
  styleUrls: ['./table-tenable.component.scss']
})
export class TableTenableComponent implements OnInit {

  loading: boolean = true; //Loading flag
  filteredData: any[] = [];
  date_range: number = 0;
  page: number = 1;
  limit: number = 50;
  lastPage: number = 1;
  currentPage: number = 1;
  dataPerPage: number = 10;

  constructor(private tableSvc: TableAssetsService) { }

  ngOnInit(): void {
    this.getDataFromAPI(this.date_range, this.page, this.limit);this.getDataFromAPI(this.date_range, this.page, this.limit);
  }

  getDataFromAPI (date_range: number, page: number, limit: number): void {
    this.loading = true;
    this.tableSvc.getTableAssets(date_range, page, limit).subscribe(result => {
      this.filteringData(result)
      this.loading = false;
      console.log(this.filteredData)
    })
  }

  filteringData(response: any) {
    this.lastPage = response.data["lastPage"] * response.data["dataPerPage"];
    this.currentPage = response.data['currentPage'];
    this.dataPerPage = response.data['dataPerPage'];

    for (let i = 0; i < response.data.data.length; i++) {
      this.filteredData[i] = {
        exposureScore: response.data.data[i].exposure_score !== null ? response.data.data[i].exposure_score : 0,
        fqdn: response.data.data[i].fqdn.length !== 0 ? response.data.data[i].fqdn : "Sin nombre de dominio",
        hasAgent: response.data.data[i].has_agent ? 'Si' : 'No',
        ipv4: response.data.data[i].ipv4.length !== 0 ? response.data.data[i].ipv4 : "Sin dirección IPv4",
        ipv6: response.data.data[i].ipv6.length !== 0 ? response.data.data[i].ipv6 : 'Sin direccion IPv6',
        lastSeen: response.data.data[i].last_seen,
        operatingSystem: response.data.data[i].operating_system.length !== 0 ? response.data.data[i].operating_system : 'Sin sistema operativo'
      }
    }
  }
}

Thanks a lot for your help. (Image of the table)

Answer 1

so the problem was about handleling promises, the next code is the correct one.

getVulnerabilitiesStates(date_range: number): void {
    this.preStatesData = [];
    this.statesData = [];
    this.isLoadingStates = true;

    this.tenableService
      .getVulnerabilitiesState(date_range)
      .pipe(
        finalize(() => {
          this.isLoadingStates = false;
        })
      )
      .subscribe({
        next: (response: any) => {
          this.filteringStatesData(response)
            .then((filtered: any) => {
              this.statesData = filtered;
              console.log("States Data", this.statesData)
            })
            .catch((e) => {
              console.error(e);
            });
        },
      });
  }

Answer 2

In such a case, you would want to go back to a more simple case and restart from there : Make your table load data from static values, no filter, no side effect, check that it works, then try to reproduce the working example from here :

https://ng.ant.design/components/table/en#components-table-demo-ajax.

Try to fork their example on stackblitz maybe, because as you can see, they are using the nzData Input attribute. I would try the same way. Only when it works, add your filtering and other side effects.