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

Question

以下是我的服务响应，页面加载后，网格仅显示result 为yes 的行。现在，我的页面也有一个 show all 复选框，因此一旦选中该复选框，所有隐藏的行也应该是可见的，一旦我取消选中复选框，只有带有 result = yes 的行应该是可见的。如何实现此显示/隐藏行功能？请指导。以下是我目前的代码，我确实使用了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) 使用单向数据绑定到[rowData] 输入属性绑定。这适用于 Angular 和 React 等框架。您可以通过将复选框绑定到 change 事件来完成此操作。然后，我们创建您数据的浅表副本，然后根据复选框选择过滤/分配您的行数据值。我做了一个简短的演示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)。如果要保持之前的网格状态，最好使用这种方法。