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

时间:2019-06-03 10:22:24

标签: angular ag-grid ag-grid-angular

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

refreshCells

1 个答案:

答案 0 :(得分: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)。如果要保持先前的网格状态,则首选使用此方法。