Angular5：在 ag-grid 中显示隐藏的行

Question

下面是我的服务响应，页面加载后网格仅显示 result 为 yes 的那些行。现在，我的页面也有一个 show all 复选框，所以一旦选中该复选框，所有隐藏的行也应该是可见的，一旦我取消选中复选框，只有 [=14 的行=] 应该是可见的。如何实现此 show/hide 行功能？请指导。下面是我到目前为止的代码，我确实使用了 refreshCells 但它没有给我预期的结果。

    data = {
        name: "A",
        result: "no"
       },
       {
        name: "B",
        result: "no"
       },
       {
        name: "C",
        result: "yes"
       },
       {
        name: "D",
        result: "yes"
       }

    private gridApi;
    private dataCopy;

    constructor() {
      this.dataCopy = data;
    }

    this.gridOptions = {
      isExternalFilterPresent: function() { 
        return true; 
      },

      doesExternalFilterPass: function(rowNode) { 
        return rowNode.data.result = "yes"; 
      }
    };

    onGridReady(params) {
       this.gridApi = params.api;
    }

    //function call on checkbox click
    showAll(event) {
      if(event.target.checked) {
        this.gridApi.refreshCells(this.dataCopy); 
      }
    }

    //HTML
    <input type="checkbox" (change)=showAll($event)

Answer 1

关于您对 ag-grid 的 api.refreshCells() 的使用，我认为这不会导致网格更新行值，因为该方法的预期行为只会影响当前呈现的单元格，如 documentation.

中所述

您可以采用以下方法来update row nodes，并且有一些方法可以做到这一点。

1) 使用 one-way 数据绑定到 [rowData] 输入属性绑定。这适用于 Angular 和 React 等框架。您可以通过将复选框绑定到 change 事件来完成此操作。然后，我们创建您的数据的浅表副本，然后根据复选框选择 filter/assign 您的行数据值。我做了一个简短的演示 here.

<input type="checkbox" (change)="toggleCheckbox($event)"/>
.
.

ngOnInit() {
  this.dataCopy = [...this.rowData];
}

toggleCheckbox(event){
  if (event.target.checked) {
    this.rowData = this.dataCopy;
  } else {
    this.rowData = this.dataCopy.filter(obj => obj.result === 'yes');
  }
}

2) 使用 api.setRowData(newData).

3) 使用 api.updateRowData(transaction)。如果你想保持之前的网格状态，最好使用这种方法。

Angular5：在 ag-grid 中显示隐藏的行

Angular5: show hidden rows in ag-grid

ag-grid

angular

ag-grid-angular