清晰度分页-从clr-dg-page-size输出
清晰度分页-从clr-dg-page-size输出
提问于 2019-09-25 04:04:54
我正在用angular 8编写清晰的应用程序。
我将datagrid与分页一起使用。我需要在每页更改项目后获取数据，但没有任何清晰的组件输出。只有更改页面时才有输出。
这里有一些html：
<clr-dg-footer>
<clr-dg-pagination #pagination [clrDgPageSize]="itemsPerPage" [clrDgTotalItems]="totalElements" [clrDgLastPage]="totalPages"
(clrDgPageChange)="onChangePage($event)">
<clr-dg-page-size [clrPageSizeOptions]="[5,20,50,100]" (change)="onItemsPerPageChange($event)">Samochodów na stronę</clr-dg-page-size>
{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
z {{pagination.totalItems}} samochodów
</clr-dg-pagination>
</clr-dg-footer>我现在就是这样做的：
onItemsPerPageChange(event) {
let newValue = +event.target.value.slice(3);
if(this.itemsPerPage !== newValue) {
this.itemsPerPage = newValue;
this.fetchCars();
}
}它是有效的，但我知道这是一种可怕的方式。
你知道怎样用正确的方法做这件事吗？我没有任何想法。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-10-05 16:21:48
我认为Claritys datagrid的常见方法是在datagrid模板中结合使用ClrDatagridStateInterface和(clrDgRefresh)绑定。
看看Claritys的Server-Driven datagrid API或this clarity-dg-server-driven Stackblitz吧。
在您的组件中，可以使用ClrDatagridStateInterface
class MyComponent {
users: User[];
total: number;
loading: boolean = true;
refresh(state: ClrDatagridStateInterface) {
this.loading = true;
...
this.inventory.filter(filters)
.sort(<{by: string, reverse: boolean}>state.sort)
.fetch(state.page.from, state.page.size)
.then((result: FetchResult) => {
this.users = result.users;
this.total = result.length;
this.loading = false;
});
}在您的模板中，您必须将(clrDgRefresh)绑定到您的refresh方法：
<clr-datagrid (clrDgRefresh)="refresh($event)" [clrDgLoading]="loading">
<clr-dg-column>User ID</clr-dg-column>
<clr-dg-column [clrDgField]="'name'">Name</clr-dg-column>
<clr-dg-column [clrDgField]="'creation'">Creation date</clr-dg-column>
<clr-dg-column [clrDgField]="'pokemon'">Pokemon</clr-dg-column>
<clr-dg-column [clrDgField]="'color'">Favorite color</clr-dg-column>
<clr-dg-row *ngFor="let user of users">
<clr-dg-cell>{{user.id}}</clr-dg-cell>
<clr-dg-cell>{{user.name}}</clr-dg-cell>
<clr-dg-cell>{{user.creation | date}}</clr-dg-cell>
<clr-dg-cell>{{user.pokemon.name}}</clr-dg-cell>
<clr-dg-cell>
<span class="color-square" [style.backgroundColor]="user.color"></span>
</clr-dg-cell>
</clr-dg-row>
<clr-dg-footer>
{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
of {{total}} users
<clr-dg-pagination #pagination [clrDgTotalItems]="total"></clr-dg-pagination>
</clr-dg-footer>
</clr-datagrid>Here你可以从Claritys的服务器驱动的例子中找到源代码。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58087433
复制相关文章
相似问题
腾讯云开发者
