Angular 5：根据条件隐藏 ag-grid 行答案

【问题标题】：Angular5: Hide ag-gird rows based on conditionAngular 5：根据条件隐藏 ag-grid 行
【发布时间】：2020-05-22 15:46:21
【问题描述】：

我有来自服务的以下响应，当flag 为真时，我必须隐藏整行（我总共有 20 列），否则显示它。如何在 ag-grid 中实现这一点？

data = {
    name: "A",
    flag: true
   },
   {
    name: "B",
    flag: false
   },
   {
    name: "C",
    flag: false
   }

我确实尝试了下面的useExternalFilter，然后我对如何进一步使用这个useExternalFilter 感到困惑。谁能指导我完成。

this.filterOptions = {
  useExternalFilter: true
};

this.gridOptions = {
  filterOptions:  this.filterOptions
 };

【问题讨论】：

标签： angular ag-grid ag-grid-angular

【解决方案1】：

你想要的是这样的：

this.gridOptions = {
  // is always present, so return true
  isExternalFilterPresent: function() { 
    return true; 
  },

  // return true if flag=true
  doesExternalFilterPass: function(rowNode) { 
    return rowNode.data.flag; 
  }
};

查看ag-Grid Docs了解更多详情

【讨论】：

【解决方案2】：

最简单的方法是，首先根据标志值过滤数据

const filteredData = this.data.filter(item => !item.flag);

然后将这个filteredData设置为网格数据

this.gridOptions.setRowData(this.filteredData);

希望这会有所帮助

【讨论】：

【解决方案3】：

尽管我们可以使用api.setRowData(newData) 显式更新/删除您的数据，但这种方法本质上会硬重置您的整个网格。根据documentation，结果如下：

网格丢弃所有先前的选择和过滤器，并且完全用新数据覆盖旧数据。这是网格的第一种方式有效并且是最“蛮力”的方式。

因此，我建议您改用transaction.remove。根据documentation，您可以提供rowNodeId 来删除行，或者我们可以使用基于对象引用的行来删除行。

这种方法是首选，因为

网格保持所有活动的排序、分组和过滤，包括更新以反映数据的变化应该排序，分组或过滤受到影响。

首先，我们可以得到需要移除的对象列表。然后，我们使用api.updateRowData(transaction) 执行事务以更新行数据，以便删除这些行。

const removeData = this.data.filter(item => item.flag);
this.gridApi.updateRowData({ remove: removeData });

我创建了一个working demo 来说明上述行为。

【讨论】：

@DilaniAlwis 你的回答是 100% 正确的 :) 我只是提供一个替代解决方案。

【解决方案4】：

如果想要更动态的过滤，可以使用bind方法

this.gridOptions = {
  // is always present, so return true
  isExternalFilterPresent: function() { 
    return true;
  }
}

ngOnInit() {
  this.gridOptions.doesExternalFilterPass = this.isVisible.bind(this)
}

isVisible(rowNode): boolean {
  // Write your logic. You can use rowNode and all component valiables.
}

【讨论】：