Ng-Zorro的NZ-Table不显示任何数据

Question

我正在开发一个页面，其中我使用a ng-zorro ，我得到来自API的数据，但是在我过滤数据后，表仅显示“无数据”显示，而没有显示分页和每个页面的数据。 我是否错过了一些异步程序来获取我的数据，表格读取数据响应？ 我的组件中的HTML代码：

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

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

非常感谢您的帮助。 （表的图像）

Answer 1

在这种情况下，您需要回到一个更简单的案例并从那里重新启动：
从静态值，无过滤器，无副作用，检查其工作是否有效，然后尝试从这里重现工作示例：

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

尝试在Stackblitz上分配他们的示例，因为如您所见，他们正在使用nzdata Input属性。我会以同样的方式尝试。
仅在工作时，添加过滤和其他副作用。

Answer 2

因此，问题是关于手理承诺，下一个代码是正确的代码。

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