Question

以下是我的服务响应，页面加载后，网格仅显示其result为yes的那些行。现在，我的页面上还有一个show all复选框，因此，选中该复选框后，所有隐藏的行也应该都可见，并且一旦我取消选中带有{{1 }}应该是可见的。如何实现此显示/隐藏行功能？请指导。到目前为止，以下是我的代码，我确实使用过result = yes，但并没有给我预期的结果。

refreshCells

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)。如果要保持先前的网格状态，则首选使用此方法。

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

1 个答案: