如何解决Ngx-datatable 不显示数据

Ngx-datatable 没有显示我从端点获取的数据
这是我的模板文件：

<ngx-datatable
      class="material p-4"
      [rows]="rows"
      [columns]="[
      { name: 'Case Title',prop: 'title'},{name: 'Location of Incidence',prop: 'location'},{name: 'Date of incidence',prop: 'dateOfIncidence'},{name: 'Description',prop: 'description'},{ name: 'No of Victims',prop: 'numberOfVictims' },{ name: 'No of Perpetrators',prop: 'numberOfSUSPECTs' },{name: 'Action',prop: 'id'}]"
      [columnMode]="ColumnMode.force"
      [headerHeight]="50"
      [footerHeight]="50"
      rowHeight="auto"
      [externalPaging]="true"
      [count]="page.totalElements"
      [offset]="page.pageNumber"
      [limit]="page.size"
      (page)="setPage($event)"
    >
    </ngx-datatable>

她的是我的类文件：

export class CriminalCaseListComponent implements OnInit {
   form: FormGroup;
   page = new Page();
   rows = Array<IncidenceReportResponse>();
   ColumnMode = ColumnMode;

   constructor(
     private formBuilder: FormBuilder,private criminalCaseService: CriminalCaseService,) {
      this.page.pageNumber = 0;
      this.page.size = 10;
   }

   ngOnInit(): void {
       this.form = this.formBuilder.group({
          incidence: ['']
       });
      this.setPage(this.page);
   }

   search() {
     console.log('search');
   }

   setPage(pageInfo) {
      console.log(pageInfo);
      this.criminalCaseService.getResults(this.page).subscribe(pagedData => {
      pagedData = pagedData[`results`];
      this.rows = pagedData;
      console.log(this.rows);
   });
  }
}

登录浏览器控制台时显示数据，但未显示在 ngx-datatable 上。

请问我做错了什么？

解决方法

问题（S）

问题 1：

来自[externalPaging]="true" causes rows to disappear?

您需要将 count 属性设置为总行数。如果您在顶部将 count 属性设置为 0，则应在您的 subscribe 方法中将其设置为返回结果的长度。

并基于提供的源代码，

 [count]="page.totalElements"

我没有看到您将总行数分配给 page.totalElements。因此它是 0 并且 ngx-datatable 不会显示任何记录。

问题 2：

解决第一个问题后，您的分页无法正常工作，因为您没有检索所选页码并将其传递给服务。

解决方案

问题 1 的解决方案

将 pagedData.page 分配回 this.page 以更新 this.page.totalElements 值。

this.page = pagedData.page;

问题 2 的解决方案

在 ngOnInit 中，您应该将带有 offset 的对象传递给 setPage。

this.setPage({ offset: this.page.pageNumber });

使用 pageInfo.offset 检索当前页码。

this.page.pageNumber = pageInfo.offset;

您的组件应如下所示：

criminal-case-list.component.ts

export class CriminalCaseListComponent implements OnInit {
  ...

  ngOnInit(): void {
    this.form = this.formBuilder.group({
      incidence: ['']
    });
    this.setPage({ offset: this.page.pageNumber });
  }

  ...

  setPage(pageInfo) {
    this.page.pageNumber = pageInfo.offset;
    this.criminalCaseService.getResults(this.page).subscribe(pagedData => {
      this.page = pagedData.page;
      this.rows = pagedData[`results`];

      console.log(this.rows);
    });
  }
}

Sample solution on StackBlitz

参考文献：