Четкость разбиения на страницы — вывод из clr-dg-page-size

Я пишу приложение в 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();
    }
  }

Это работает, но я знаю, что это ужасный способ сделать это.

Вы знаете, как это сделать правильно? У меня нет идей.


typescript angular datagrid vmware clarity
person Kamilox    schedule 24.09.2019    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я думаю, что общий способ с сеткой данных Clarity заключается в использовании ClrDatagridStateInterface вместе с привязкой (clrDgRefresh) внутри шаблона сетки данных. .

Взгляните на Claritys Server-Driven Datagrid API или этот Stackblitz, управляемый dg-сервером.

В вашем компоненте вы можете использовать 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>

Здесь вы можете найти исходники из примера, управляемого сервером Claritys.

person zerocewl    schedule 05.10.2019