Angular 如何按集合的嵌套属性对筛选器选项进行分组。单个复选框

我想知道如何根据集合的属性字段对列的筛选器值进行分组

列数据：

{
用户：[
{id:1，isExternal:true，名字：“John”}，
{id:2，isExternal:false，名字：“George”}，
{id:3，isExternal:true，名称：“Bob”}
]
}

外部用户由valueGetter函数格式化：

columnDefs：[
{
enableRowGroup:true，
字段：“用户”，
headerName:“用户”，
最小宽度：150，
过滤器：“agSetColumnFilter”，
估价师：（参数：任意）=>{
return（params.data.users | |[]）.map（（user:user）=>
user.isExternal？`${user.name}（EXT）`:user.name
);
}
}
];

我最终得到了列过滤器，每个值都有许多复选框

是否可以将筛选项分组为一个复选框

---

例如：一个名为“External”的复选框过滤器，它将过滤所有外部用户，如果不选中，它将显示所有用户。

您可以构建一个自定义过滤器来实现这一点

根据此文档，您需要构建两个组件：

• 实际的筛选器组件，用于检查列数据是否具有正确的值
• 如果要使用此过滤器，则为“浮动过滤器” 列标题后面

浮动过滤器调用“main”过滤器中的逻辑并更新表中的视图

对于主过滤器，代码可能如下所示：

     @Component(  selector: 'app-boolean-filter',
                         template: '
<div class="ag-filter">
   <select [(value)]="currentFilterValue" (change)="filterChange($event.target.value)">
      <option value="">all values</option>
      <option value="true">yes</option>
      <option value="false">no</option>
   </select>
</div>',
      style: '.ag-filter {  
        width: 100%;
        select {
            width: 100%;
            min-height: 24px;
            border-radius: 3px;
            padding-left: 6px;
            border-width: 1px;
            border-style: solid;
            border-color: #babfc7;
        }
    }')
    
    export class BooleanFilterComponent implements IFilterAngularComp {
      currentFilterValue: any;
    
      private params: IFilterParams;
      private valueGetter: (rowNode: RowNode) => any;
    
      agInit(params: IFilterParams): void {
        this.params = params;
        this.currentFilterValue = null;
        this.valueGetter = params.valueGetter;
      }
    
      isFilterActive(): boolean {
        return this.currentFilterValue !== null;
      }
    
      doesFilterPass(params: IDoesFilterPassParams): boolean {
        const valueGetter: any = this.valueGetter;
        const value: any = valueGetter(params);
    
        if (this.isFilterActive()) {
          return value === JSON.parse(this.currentFilterValue);
        }
      }
    
      getModel(): any {
        return this.isFilterActive() ? this.currentFilterValue : null;
      }
    
      setModel(model: any): void {
        this.filterChange(model);
      }
    
      afterGuiAttached(params: IAfterGuiAttachedParams): void {
      }
    
      takeValueFromFloatingFilter(value: any): void {
        this.filterChange(value);
      }
    
      filterChange(newValue: any): void {
        this.currentFilterValue = newValue === '' ? null : newValue;
        this.params.filterChangedCallback();
      }
    }

@组件（选择器：'app boolean filter'，
模板：'
所有价值观
对
不
',
样式：'.ag筛选器{
宽度：100%；
挑选{
宽度：100%；
最小高度：24px；
边界半径：3px；
左侧填充：6px；
边框宽度：1px；
边框样式：实心；
边框颜色：#babfc7；
}
}')
导出类BooleanFilterComponent实现IFilterAngularComp{
currentFilterValue：任意；
私有参数：IFilterParams；
private valueGetter:（rowNode:rowNode）=>any；
agInit（参数：IFilterParams）：无效{
this.params=params；
this.currentFilterValue=null；
this.valueGetter=params.valueGetter；
}
isFilterActive（）：布尔值{
返回此.currentFilterValue！==null；
}
doesFilterPass（参数：IDoesFilterPassParams）：布尔值{
const valueGetter:any=this.valueGetter；
常量值：any=valueGetter（params）；
if（this.isFilterActive（））{
返回值===JSON.parse（this.currentFilterValue）；
}
}
getModel（）：任何{
返回此.isFilterActive（）？此.currentFilterValue:null；
}
setModel（型号：任意）：无效{
本.过滤器更换（型号）；
}
afterGuiAttached（参数：IAfterGuiAttachedParams）：无效{
}
takeValueFromFloatingFilter（值：任意）：无效{
此.filterChange（值）；
}
filterChange（newValue:any）：无效{
this.currentFilterValue=newValue==''？null:newValue；
this.params.filterChangedCallback（）；
}
}

---

doesFilterPass方法是神奇的一步：valueGetter（params）从网格列中配置的数据字段中获取值，并检查它是否通过过滤器，隐藏或显示在表中。

valueGetter函数的params参数上是否有用户id？是，我可以从params.data.users检索到的所有字段都有效，谢谢！但是，有没有办法过滤单元内的元素？请注意，每个单元格都包含一个用户数组。如果我从下拉列表中选择“External”，它会过滤所有有外部用户的记录（在您回答后已经在工作），但我也会过滤每个单元格中的值。类似于根据所选筛选选项的动态valueGetter。您可以实现customCellRenderer以在单元格中显示筛选的数据。在“params”对象中，可以读取调用params.api的应用过滤器。更多信息：非常感谢！