删除“无数据”来自NZ-Table的标签

Question

（对不起，我的英语水平不是我的自然语言） 我正在使用Smarts和Dumbs组件架构开发网页。 因此，我获取一个API，可以在智能组件中给我一个数据集，但是当我想给我的愚蠢组件（表）响应时，它像没有数据一样，如下一个图像中看到的那样=“ https://i.sstatic.net/wi0pc.png” rel =“ nofollow noreferrer”>数据加载时表。

但是，当加载数据时，表仍将“无数据”消息渲染，如下一个图像表错误。

我还将一些元素放在诸如Paginator之类的元素上，并带有响应对哑巴组件的数据，但它并未在愚蠢的组件中呈现。

我智能组件中的代码是下一个

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

}

我的智能组件的HTML：我

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

的哑巴组件的代码是下一个：

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 { }

}

我哑巴组件的html是下一个：

<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>

所以我请您请一些帮助，感谢您的帮助，谢谢您的注意。

Answer 1

抱歉迟到了，我找到了解决方案。
问题是关于承诺的处理，因此在智能组件中，正确的代码为

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

，现在填充了数组。