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。因此它是 0 并且ngx-datatable 不会显示任何记录。

---

问题 2：

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

---

解决方案

问题 1 的解决方案

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

this.page = pagedData.page;

---

问题 2 的解决方案

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

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

1. 使用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

---

参考资料：

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