Ясность - Динами c Датагрид - PullRequest
Новая
       7

Ясность - Динами c Датагрид

0 голосов
/ 16 января 2020

Мне было интересно, какие возможности у меня есть, чтобы сделать компонент DataGrid более динамичным c.

Мой пример использования: у меня есть DataGrid, который я хочу использовать для (1) серверной нумерации страниц и сортировка и (2) локальная сортировка / фильтрация.

Хотя оба прекрасно работают сами по себе, я хочу создать компонент, который упаковывает DataGrid и принимает решение (управляемый сервером против локальной пагинации / фильтрации и т. д.). c) Возможность настройки то же самое.

Пример: 

...
<ng-container *ngIf="serverDriven">
    <clr-dg-row *ngFor="let item of itemList ? itemList : []"
                [clrDgItem]="item"
                clickable>
        <clr-dg-cell>
            {{ item.name }}
        </clr-dg-cell>
        <clr-dg-cell>
            {{ item.description }}
        </clr-dg-cell>
    </clr-dg-row>
</ng-container>
<ng-container *ngIf="!serverDriven">
    <clr-dg-row *clrDgItems="let sensor of itemList ? itemList : []"
                [clrDgItem]="item"
                clickable>
        <clr-dg-cell>
            {{ item.name }}
        </clr-dg-cell>
        <clr-dg-cell>
            {{ item.description }}
        </clr-dg-cell>
    </clr-dg-row>
</ng-container>
...

Я пробовал несколько подходов с ngTemplateOutlet и ngComponentOutlet, но не смог заставить его работать из-за нескольких провайдеров, составляющих сетку данных (например, clr-dg-row) зависит от.

Есть предложения как это решить?

1 Ответ

0 голосов
/ 27 января 2020

Сочетание «серверной разбивки на страницы и сортировки» и «локальной сортировки / фильтрации» должно рассматриваться не в самом представлении, а в источнике данных за сеткой. Этот шаблон привязывается к переменной $ user, которую можно заполнять всякий раз, когда вызывается событие refre sh сетки. Параметр метода refre sh (ClrDatagridStateInterface) предоставляет вам всю информацию для выполнения загрузки, фильтрации и сортировки, и контроллер может решить, обрабатывать его локально или нет. 

<clr-datagrid (clrDgRefresh)="refresh($event)" [clrDgLoading]="loading">
  <clr-dg-placeholder>No users found</clr-dg-placeholder>
  <clr-dg-column [clrDgField]="'name'">Name</clrdg-column>
  <clr-dg-column [clrDgField]="'email'">Email</clrdg-column>

  <clr-dg-row *ngFor="let user of users$">
    <clr-dg-cell>{{ user.name }}</clr-dg-cell>
    <clr-dg-cell>{{ user.email }}</clr-dg-cell>
  </clr-dg-row>

  <clr-dg-footer>
    <clr-dg-pagination #pagination [clrDgPageSize]="10" [clrDgTotalItems]="total">
      <clr-dg-page-size [clrPageSizeOptions]="[10, 25]">Page</clr-dg-page-size>
    </clr-dg-pagination>
  </clr-dg-footer>

</clr-datagrid>
...