vmware-clarity - Datagrid - 使用自定义过滤器生成动态列会导致问题

Question

我正在使用 VMWare Clarity，版本 0.10。

我有一个数据网格，它动态地做一些事情：

• 基于列表生成列
• 如果标志 'hide' 设置为 true，则隐藏某些列
• 如果一列称为分数，则添加自定义过滤器

Plnkr：https ://plnkr.co/edit/Jov3VMt63C3lpkTp2ldi?p=preview

代码：

<clr-datagrid *ngIf="myData$ | async as myData" #myGrid>
  <clr-dg-placeholder>No data found</clr-dg-placeholder>

  <clr-dg-column *ngFor="let column of myData.columns"
                 [clrDgField]="column.name" [clrDgSorted]="column.name === 'name'">
    <div *ngIf="column.isMandatory; else hideableBlock">
      {{column.displayName}}
    </div>
    <ng-template #hideableBlock>
      <div *ngIf="column.name !== 'score'; else scoreColumn">
        <ng-container *clrDgHideableColumn="{hidden: (column.name !== 'score') && !column.isscore}">
          {{column.displayName}}
        </ng-container>
      </div>

      <ng-template #scoreColumn>
        <ng-container *clrDgHideableColumn="{hidden: false}">{{column.displayName}}
          <clr-dg-string-filter id="scoreFilter" [clrDgStringFilter]="scoreFilter"  [clrFilterValue]="(scoreScore$ | async)"></clr-dg-string-filter>
        </ng-container>
      </ng-template>
    </ng-template>
  </clr-dg-column>

  <clr-dg-row *clrDgItems="let entity of (entities$ | async)">
    <clr-dg-cell *ngFor="let column of myData.columns">{{entity[column.name]}}
    </clr-dg-cell>
  </clr-dg-row>

  <clr-dg-footer></clr-dg-footer>
</clr-datagrid>

问题在于如何在 html 中呈现此 Score 标头：

<ng-container *clrDgHideableColumn="{hidden: false}">{{column.displayName}}
      <clr-dg-string-filter id="scoreFilter" [clrDgStringFilter]="scoreFilter"  [clrFilterValue]="(scoreScore$ | async)"></clr-dg-string-filter>
    </ng-container>

所有其他列在排序按钮之外显示过滤器按钮。例如

<clr-dg-column _ngcontent-c4="" ng-reflect-field="owner" ng-reflect-sorted="false" class="datagrid-column" style="width: 96px;">
<div class="datagrid-column-flex">
    <clr-dg-string-filter ng-reflect-custom-string-filter="[object Object]" ng-reflect-value="">
        <clr-dg-filter ng-reflect-open="false" ng-reflect-custom-filter="[object Object]">
            <button class="datagrid-filter-toggle" type="button"></button>
        </clr-dg-filter>
    </clr-dg-string-filter>

    <button class="datagrid-column-title" type="button">
        <div _ngcontent-c4="">
            Owner
        </div>
    </button>
    <div class="datagrid-column-separator">
        <button class="datagrid-column-handle" tabindex="-1" type="button"></button>
        <div class="datagrid-column-handle-tracker"></div>
    </div>
</div>

注意位置：

<button class="datagrid-filter-toggle" type="button"></button>

但是，在 Score html 中，此按钮出现在

<button class="datagrid-column-title" type="button">

例如

<clr-dg-column _ngcontent-c4="" ng-reflect-field="score" ng-reflect-sorted="false" class="datagrid-column desc" style="width: 100px;">
<div class="datagrid-column-flex">
    <button class="datagrid-column-title" type="button">
        Score
        <clr-dg-string-filter _ngcontent-c4="" id="completenessFilter" ng-reflect-custom-string-filter="[object Object]">
            <clr-dg-filter ng-reflect-open="false" ng-reflect-custom-filter="[object Object]">
                <button class="datagrid-filter-toggle" type="button" style="position: static;"></button>
            </clr-dg-filter>
        </clr-dg-string-filter>
    </button>
    <div class="datagrid-column-separator">
        <button class="datagrid-column-handle" tabindex="-1" type="button"></button>
        <div class="datagrid-column-handle-tracker"></div>
     </div>
</div>

问题是单击过滤器图标也会切换排序：

有什么建议么？

Answer 1

As answered on Github, Clarity components can't drill into templates that are declared on the application side, because they're "black-boxed" by Angular. So the solution in your case is to put your custom filter in its own *ngIf, which means the only *ngIf left on the columns themselves is the hideable/mandatory one: https://plnkr.co/edit/Hhms3CxLmzKHark5HVsd?p=preview