Question

使用ngx-datatable-column模板和绑定比较器功能时，所有可排序列的最后一个绑定比较器。

例如：

<div class="m-333">
  <button mat-raised-button color="primary" (click)="openPopUp({}, true)">Add User</button>
</div>

<mat-card class="p-0" [@animate]="{value:'*',params:{y:'50px',delay:'300ms'}}">
  <mat-card-content class="p-0">
    <ngx-datatable #ngxDatatable class="material ml-0 mr-0" [rows]="rows" [columnMode]="'force'" [headerHeight]="50"
      [footerHeight]="50" [scrollbarH]="true" [rowHeight]="50" [externalPaging]="false" [count]="page.count"
      [sortType]="'multi'" [offset]="page.offset" [limit]="page.size" (page)='setPage($event)'>
      <ngx-datatable-column name="Name" prop="displayName" [flexGrow]="1" [sortable]="false" [comparator]="displayNameComparator">
        <ng-template let-row="row" ngx-datatable-cell-template>
          {{ row?.displayName }}
        </ng-template>
      </ngx-datatable-column>
      <ngx-datatable-column name="Email" prop="email" [flexGrow]="1" [sortable]="false" [comparator]="emailComparator">
        <ng-template let-row="row" ngx-datatable-cell-template>
          {{ row?.email }}
        </ng-template>
      </ngx-datatable-column>
      <ngx-datatable-column name="Creation Date" prop="creationTime" [flexGrow]="1" [sortable]="true"
        [comparator]="creationDateComparator">
        <ng-template let-row="row" ngx-datatable-cell-template>
          {{ row?.metadata.creationTime | date: 'MM/dd/yyyy hh:mm' }}
        </ng-template>
      </ngx-datatable-column>
      <ngx-datatable-column name="Last Sign" [flexGrow]="1">
        <ng-template let-row="row" ngx-datatable-cell-template>
          {{ row?.metadata.lastSignInTime | date: 'MM/dd/yyyy hh:mm' }}
        </ng-template>
      </ngx-datatable-column>
      <!-- <ngx-datatable-column name="Status" [flexGrow]="1">
        <ng-template let-row="row" ngx-datatable-cell-template>
          <mat-chip mat-sm-chip [color]="'warn'" [selected]="isRowActive(row)">
            {{isRowActive(row) ? 'Active' : 'Complete'}}</mat-chip>
        </ng-template>
      </ngx-datatable-column> -->
      <ngx-datatable-column name="Actions" [flexGrow]="1">
        <ng-template let-row="row" ngx-datatable-cell-template>
          <button mat-icon-button mat-sm-button color="primary" class="mr-1" (click)="openPopUp(row, false)">
            <mat-icon>edit</mat-icon>
          </button>
          <button mat-icon-button mat-sm-button color="warn" (click)="deleteItem(row)">
            <mat-icon>delete</mat-icon>
          </button>
        </ng-template>
      </ngx-datatable-column>
      <ngx-datatable-footer>
        <ng-template ngx-datatable-footer-template let-rowCount="rowCount" let-pageSize="pageSize"
          let-selectedCount="selectedCount" let-curPage="curPage" let-offset="offset" let-isVisible="isVisible">
          <div class="page-count">
            Total: {{rowCount.toLocaleString()}}
          </div>
          <datatable-pager [pagerLeftArrowIcon]="'datatable-icon-left'" [pagerRightArrowIcon]="'datatable-icon-right'"
            [pagerPreviousIcon]="null" [pagerNextIcon]="null" [page]="curPage" [size]="pageSize" [count]="rowCount"
            [hidden]="!((rowCount / pageSize) > 1)" (change)='setPage($event)'>
          </datatable-pager>
        </ng-template>
      </ngx-datatable-footer>
    </ngx-datatable>
  </mat-card-content>
</mat-card>

第一列“名称”，第二列“电子邮件”和第三列“创建日期”都将调用creationDateComparator，因为它是最后绑定的比较器。

我可以告诉我首先排序的列是将该比较器函数绑定到所有列。因此，如果我选择首先对“电子邮件”列进行排序，那么当我调用“名称”列时，它将使用emailComparator，但也使用电子邮件值而不是displayName值。

如果这种预期的行为应该能够为每列绑定一个不同的比较器功能，我感到很惊讶。

Answer 1

你是对的。 Ngx数据表应具有多个比较器功能。每列一个。通过在HTML模板和打字稿文件中指定比较器功能，它可以以两种方式正常工作。

我在您的代码中看到的问题是您没有在任何ngx列上设置prop属性。尝试为每个单独的列设置它。我认为那应该可以。

ngx-datatable仅绑定到最后一个比较器

1 个答案: