Remove "No data" label from nz-table in a Dumb Component

Question

(Sorry for my english level, is not my natural language) I am developing a webpage using the smarts and dumbs components architecture. So I fetch an API that gives me a dataset in my smart component, but when I want to give to my dumb component (a table) the response, it put like it has no data, as you see in the next Image The table when the data is loading.

But when the data is loaded, the table still renderize the "No data" message, as you see in the next image The table error.

I also put some elements like a paginator with the data that the response gives to the dumb component, but it doesnt renderize in the dumb component.

The code from my smart component is the next

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

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

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

  constructor (private tableSvc: TableAssetsService) { }

  ngOnInit(): void {
    this.loading = true;
    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(response => {this.filteringData(response)})
  }

  filteringData(response: any) {
    this.lastPage = response.data["lastPage"];
    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'
      }
    }
    this.loading = false;
  }

}

The HTML of my Smart component is the next:

<app-table-tenable
  [dataset]="filteredData"
  [loading]="loading"
  [lastPage]="lastPage"
  [dataPerPage]="dataPerPage"
  [currentPage]="currentPage"></app-table-tenable>

And the code of my dumb component is the next:

import {Component, Input, OnInit} from '@angular/core';

@Component({
  selector: 'app-table-tenable',
  templateUrl: './table-tenable.component.html',
  styleUrls: ['./table-tenable.component.scss']
})
export class TableTenableComponent implements OnInit {
  @Input() dataset: any[] = [];
  @Input() loading: boolean = true;
  @Input() lastPage: number = 1;
  @Input() dataPerPage: number = 1;
  @Input() currentPage: number = 1;

  constructor() { }

  ngOnInit(): void { }

}

The HTML of my dumb component is the next:

<nz-table
  nzBordered
  nzShowSizeChanger
  [nzData]="dataset"
  [nzFrontPagination]="false"
  [nzLoading]="loading"
  [nzTotal]="lastPage"
  [nzPageSize]="dataPerPage"
  [nzPageIndex]="currentPage"
  [nzPageSizeOptions]="[20, 40, 60, 80]"
  #basicTable>
  <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 item of dataset">
      <td>{{item.exposureScore}}</td>
      <td>{{item.fqdn}}</td>
      <td>{{item.hasAgent}}</td>
      <td>{{item.ipv4}}</td>
      <td>{{item.ipv6}}</td>
      <td>{{item.lastSeen | date: 'dd/MM/YYYY'}}</td>
      <td>{{item.operatingSystem}}</td>
    </tr>
  </tbody>
</nz-table>

So I ask you please some help, thanks for your attention.

Answer 1

Sorry for being late, bit I found the solution. The problem was about handleling the promises, so in the smart component the correct code is

    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);
            });
        },
      });
  }

and now the array is filled.