Angular ngx-datatable不刷新

Question

我尝试过下面的代码，一切似乎都没问题(没有收到任何错误，api调用也有数据)，但最终表格为空。

*reloadTable*是调用API的函数。 API调用结果： 空表格：

@Component({
      selector: 'app-my-component',
      template: `
        <ngx-datatable
          class="bootstrap table table-striped"
          [rows]="rows"
          [columns]="columns"
          [columnMode]="'force'"
          [headerHeight]="50"
          [footerHeight]="50"
          [rowHeight]="'auto'"
          [externalPaging]="true"
          [externalSorting]="true"
          [count]="page.count"
          [offset]="page.offset"
          [limit]="page.limit"
          [sortType]="'single'"
          (page)="pageCallback($event)"
          (sort)="sortCallback($event)"
        ></ngx-datatable>
      `
    })

    export class NGXServerSide implements OnInit {
      rows: Object[]=[];      
      columns = [
        { name: 'EmployeeID' },
        { name: 'Name' },
        { name: 'City' },
        { name: 'Department' },
        { name: 'Gender' },
      ];         
      constructor(private httpClient: HttpClient, private _employeeService: EmployeeService) { }

      ngOnInit() {
        this.pageCallback({ offset: 1 });
      }
    pageCallback(pageInfo: { count?: number, pageSize?: number, limit?: number, offset?: number }) {
        this.page.offset = pageInfo.offset;
        this.reloadTable();
      }        
    reloadTable() {
    const params = this.addTableParams();// params for api input
    this._employeeService.getSortedPagedResults(params).subscribe((res: Response) => {
     for (var i in res)       
     this.rows.push([res[i]]);
     this.page.count=1;
     });
     }  
    }

- Sunil Kumar

---

实际的问题陈述或问题缺失... - Laurenz Albe

我不明白@LaurenzAlbe的意思。 - Sunil Kumar

好吧，我也不明白。 - Laurenz Albe

Answer 1

在仔细查看您的问题后，我了解到了问题所在。您正在向数据表传递数据，但是数据没有显示出来。存在两个问题：

1. 数据表不知道绑定到哪里。在NGXServerSide类中，您只给列命名了一个名称。请像这样为列提供要绑定的属性：

   columns = [{ name: 'EmployeeID', prop: 'EmployeeID' }]

2. 您传递的对象与列名称不匹配。从屏幕截图中可以看到EmployeeId: '1'，但是您的列需要EmployeeID

我在下面包含了ngx-datatable API文档的链接，其中包含您可以使用的其他列属性。 ngx-datatable 列属性

- emmojo

---

谢谢@emmojo，现在它已经可以工作了。 { name: 'EmployeeId'，prop：'EmployeeId' }起到了关键作用。实际上，我已经将其从“EmployeeID”更改为“EmployeeId”，但prop是使其工作的主要原因。 - Sunil Kumar

请您检查一下这个链接：https://stackoverflow.com/questions/50982494/how-to-reorder-ngx-datatables-column-in-angular - Sunil Kumar

好的，我会去看一下。 - emmojo