隐藏 Ag-Grid 中的特定行值 - Angular

【问题标题】：Hide specific row values in Ag-Grid - Angular隐藏 Ag-Grid 中的特定行值 - Angular
【发布时间】：2021-03-12 14:01:29
【问题描述】：

我已经实现了 Angular Ag-Grid 来显示数据列表。是否可以隐藏特定的行值（单元格）。

在这里我想隐藏最后一行的最后两个单元格（编辑和删除图标）。目前我正在使用下面的代码。

setTimeout(()=>{
   hideLastColCells()
},200);

hideLastColCells() {
   let tableRow = document.getElementsByClassName('ag-center-cols-container')[0].children;
   let lastRow = tableRow[tableRow.length - 1].children
   lastRow[lastRow.length-1].classList.add("d-none");
   lastRow[lastRow.length-2].classList.add("d-none");
}

但是由于超时，用户体验不好，这不是 Angular 的方式。

【问题讨论】：

标签： javascript angular typescript angular-material ag-grid

【解决方案1】：

您可以将单元格渲染器模板包装在 <div *ngIf="!hidden">...</div> 中，然后执行以下操作：

class CellRenderer implements ICellRendererAngularComp {

  public hidden: boolean;

  // ...

  agInit(params: ICellRendererParams): void {
    // Set `this.hidden = true` if you want to hide your renderer here
    // In this case, when the row is the last one in the grid.
    // This assumes you're passing the rowData.length in the `context` object of your grid
    // in the parent component
    // e.g. `this.context = { numberOfRows: rowData.length }`
  
    this.hidden = params.rowIndex === params.context.numberOfRows - 1;
  }

  // ...

}

请记住以某种方式在 ag-grid 的 context 属性中传递 rowData 的长度

【讨论】：