gpt4 book ai didi

Angular ngx-datatable 不刷新

转载 作者:行者123 更新时间:2023-12-02 16:02:58 25 4
gpt4 key购买 nike

我尝试了下面的代码,一切看起来都不错(没有收到任何错误,甚至有来自 api 调用的数据),但最后我得到了一个空表。

*reloadTable* 是调用 API 的函数。

来自 API 调用的数据: enter image description here

空表: enter image description here

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

最佳答案

仔细查看您的问题后,我明白了问题所在。您正在将数据传递到数据表,但它没有被显示。有两个问题:

  1. 数据表不知道要绑定(bind)到什么。在 NGXServerSide 类中,您只需为列指定一个名称。为该列提供一个要绑定(bind)的属性,如下所示:

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

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

我在下面添加了 ngx-datatable API 文档中的链接,其中包含一些您可以使用的其他列属性。 ngx-datatable column properties

关于Angular ngx-datatable 不刷新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50943088/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com