Ngx-datatable不显示数据

Question

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

请问我做错了什么？

Answer 1

问题(S)

问题1：

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

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

并且基于所提供的源代码，

 [count]="page.totalElements"

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

问题2：

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

解决方案(S)

问题1的解决方案

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

this.page = pagedData.page;

问题2的解决方案

在ngOnInit中，您应该向setPage.传递带有offset的object

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

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

this.page.pageNumber = pageInfo.offset;

您的组件应如下所示：

刑事案件-案例列表.组件.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

参考文献：

1. Server-side Paging
2. Server-side Paging (Source code)