Блог

Я реализовал Angular Ag-Grid для отображения списка данных.Можно ли скрыть определенные значения строк (ячеек).

Здесь я хочу скрыть последние две ячейки (edit и del. значки) последнего ряда. В настоящее время я использую приведенный ниже код, который работает.

 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");
}
 

Но из-за тайм-аута пользовательский интерфейс не очень хорош, и это не угловой способ.

Вы можете обернуть свой шаблон рендеринга ячеек во что — то вроде a <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;
  }

  // ...

}
 

Просто не забудьте каким-то образом передать длину вашего rowData реквизита в ag-grid context