Question

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

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

根据列表生成列
会隐藏某些列。设置为true
如果列名为Score，则添加自定义过滤器

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中呈现此分数标题：

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

所有其他列在排序按钮之外显示过滤器按钮。 E.g。

<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>

但是，在分数html中，此按钮显示在

中

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

E.g。

<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

回答on Github时，Clarity组件无法深入到应用程序端声明的模板，因为它们被Angular“黑盒子”。因此，您的解决方案是将自定义过滤器放在自己的*ngIf中，这意味着列本身左侧唯一的*ngIf是可隐藏/强制过滤器：https://plnkr.co/edit/Hhms3CxLmzKHark5HVsd?p=preview

Datagrid - 使用自定义过滤器生成动态列，从而导致出现问题

1 个答案: