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

Posted 2023-03-28

【中文标题】隐藏 Ag-Grid 中的特定行值 - Angular

【英文标题】：Hide specific row values in 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 的方式。

【参考方案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 的长度