清晰度 - 动态数据网格

Question

我想知道我有哪些可能使 DataGrid 组件更具动态性。

我的用例：我有一个 DataGrid，我想将它用于 (1) 服务器驱动的分页和排序以及 (2) 本地排序/过滤。

虽然两者都可以自己正常工作，但我想构建一个组件，它包装 DataGrid 并使决策（服务器驱动与本地分页/过滤等）可配置。

我当前的解决方案工作正常，但很难看，因为我将行循环包装在 ng-container 中，并且由于单元格相同，因此需要进行大量复制和粘贴。

例子：

...
<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）依赖于多个提供程序而无法使其正常工作。

有什么建议可以解决这个问题吗？

Answer 1

“服务器驱动的分页和排序”和“本地排序/过滤”的组合不应该在视图本身中处理，而是在网格后面的数据源中处理。此模板绑定到 users$ 变量，每当调用网格的刷新事件时都可以填充该变量。刷新方法的参数（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>