如何在 CellRenderer 中为 ag-grid 单元使用 Angular ngbPopover

Question

我已经设置并开始运行一个 Angular 应用程序，我决定使用 ag-grid 社区作为关键基础组件（在表格中显示来自后端 API 的数据并使用 fontawesome 图标使数据易于阅读）。

我的一切看起来都很好，并且我的东西​​还可以，但是当我尝试将 ngbPopover 工具提示应用到带有批准操作的用户名的 cellrenderer 渲染图标（刻度和 x 表示批准的布尔值）时图标已呈现，但我的弹出框没有。

我已尝试对其进行故障排除，但找不到任何特定的基于角度/TS 的解决方案 - 我也有一种感觉，渲染器在角度生命周期之外进行渲染，并且生成的弹出框不存在，因为我错过了它应该存在以便被捕获和正确处理。

我之前使用以前版本的 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 在单元格本身内渲染给定的自定义渲染器组件。因此，您将无法将其可视化为弹出框，因为它正在单元格内呈现。

因此，您可以编写一个自定义单元格编辑器组件并将其绑定到您的单元格，然后它将在单元格之外显示信息。

示例代码

grid.component.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() { }

}

这就是它的样子