如何在 CellRenderer 中為 ag-grid 單元使用 Angular ngbPopover

Question

我已經設置並開始使用 Angular 應用程序，我決定使用 ag-grid 社區作為關鍵的基礎組件（在表格中顯示來自后端 API 的數據並使用超棒的圖標使數據易於閱讀）。

我的一切看起來都很好，並且我的東西​​一切正常，但是當我嘗試將 ngbPopover 工具提示應用到 cellrenderer 呈現的圖標（勾選和 x 表示已批准的布爾值）以及批准操作的用戶的名稱時，該圖標是呈現但我的彈出框不是。

我試圖對其進行故障排除，但找不到任何特定的基於 angular/TS 的解決方案 - 我也有一種感覺，渲染器在 angular 生命周期之外渲染，並且生成的彈出框不存在，因為我錯過了它應該出現的點被抓住並正確處理。

我以前用以前版本的 angular 做過這個並且讓它工作，但我們沒有在那里使用 ngbpopover - 但我想在這里。

此外，我還使用 tooltipField 將工具提示切換到單元格上，但我真的不喜歡這里的命中框，而且不夠清晰，我特別希望它出現在我的圖像上。

approvalCellRenderer(cell: any) {
    const popover = `
                      ngbPopover="Popover Working!"
                      triggers="mouseenter:mouseleave"
                      popoverTitle="Pop titleimg"
                      container="body"
                    `;
    const tick = '<i class="fa fa-check-circle" style="color:green" ' + popover + '></i>';
    const cross = '<i class="fa fa-times-circle align-center" style="color:red"' + popover + '></i>';

    const start = '<div class="">';
    const end = '</div>';

    let result = start + tick + end;

    if (cell.value === null) {
      result = start + cross + end;
    }
    return result;
  }

關於我做錯了什么的任何建議都會很棒。

Answer 1

ag-grid cell-renderer 正在單元格本身內渲染給定的自定義渲染器組件。 因此，您將無法將其可視化為彈出框，因為它是在單元格內呈現的。

因此，您可以做的是編寫一個自定義單元格編輯器組件並將其綁定到您的單元格，然后它將顯示單元格之外的信息。

示例代碼

網格組件.html

<ag-grid-angular #agGrid style="width: 100%; height: 500px;" class="ag-theme-balham" [gridOptions]="gridOptions"
  (gridReady)="onGridReady($event)">
</ag-grid-angular>

grid.component.ts

GridOptions 和虛擬數據是通過這個設置的。

import { Component, OnInit } from '@angular/core';
import { GridOptions } from 'ag-grid-community';
import { OptionsCellRendererComponent } from './options-cell-renderer/options-cell-renderer.component';

@Component({
  selector: 'app-grid',
  templateUrl: './grid.component.html'
})
export class GridComponent implements OnInit {
  gridOptions: GridOptions;

  constructor() { }

  ngOnInit() {
    this.gridOptions = {
    } as GridOptions;
  }

  onGridReady(params) {
    this.setData();
  }

  setData() {
    this.gridOptions.api.setColumnDefs(this.getColumnDefinitions());
    this.gridOptions.api.setRowData(this.getData());
  }

  getColumnDefinitions(): any {
    return [
      {
        field: 'option',
        headerName: 'Option',
        cellRendererFramework: OptionsCellRendererComponent
      },
      {
        field: 'year',
        headerName: 'Year'
      },
    ]
  }

  getData(): any {
    return [
      {
        option: '1',
        year: 1990
      },
      {
        option: null,
        year: 1991
      }
    ];
  }

}

options-cell-renderer.component.html

根據選項值顯示拒絕或批准圖標

<ng-template #approvePopup>
    This is a simple popover
</ng-template>

<img style="height: 20px; width:20px;" *ngIf="!isValid()" src="../../../assets/images/1.png" [ngbPopover]="approvePopup"
    placement="auto" triggers="mouseenter:mouseleave" />
<img style="height: 20px; width:20px;" *ngIf="isValid()" src="../../../assets/images/2.png" [ngbPopover]="approvePopup"
    placement="auto" triggers="mouseenter:mouseleave" />

options-cell-renderer.component.ts

檢查選項值的有效性

import { Component } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';

@Component({
  selector: 'app-options-cell-renderer',
  templateUrl: './options-cell-renderer.component.html',
  styleUrls: ['./options-cell-renderer.component.css']
})
export class OptionsCellRendererComponent implements ICellRendererAngularComp {
  public params: any;
  option: string;

  agInit(params: any): void {
    this.params = params;
  }

  isValid(): boolean {
    return this.params.value !== undefined && this.params.value !== null;
  }


  refresh(): boolean {
    return false;
  }

  constructor() { }

}

這就是它的樣子