Question

当前的角度ag-grid工具提示示例不起作用。

https://stackblitz.com/edit/angular-ag-grid-tooltip-example-fb7nko

Javascript /打字稿。运行Angular 8和最新的Ag-grid版本。我试过将the子的例子带到T上，但没有运气。我现在正在尝试。我有一个名为CustomTooltipComponent的组件，该组件的模板中有一个动态的mat-tooltip，该模板从我的.ts文件中提取{{data}}。工具提示没有显示，所以我将其放在一个范围内并显示，但它以纯文本显示。创建的组件也已添加到我的输入和声明模块中。

<<<----   component that wants the tooltip --->

this.gridOptions = {
      deltaRowDataMode: true,
      getRowNodeId: (data) => data.name,
      onRowDoubleClicked: (data) => this.selectRow(data),
      rowSelection: 'single',
      defaultColDef: {
        sortable: true,
        resizable: true,
        tooltipComponentFramework: CustomTooltipComponent,
        tooltipValueGetter: (params: ITooltipParams) => params.data,
      }
    };```

      this.columnDefs = [
        {
          headerName: 'Name',
          field: 'name',
          sort: 'asc',
         // tooltipField: 'name'
        }



<<<-------- tooltip component .ts ------->>>

import { Component } from '@angular/core';
import { ITooltipAngularComp } from 'ag-grid-angular';
import { ITooltipParams } from 'ag-grid-community';

@Component({
  selector: 'app-custom-tooltip',
  templateUrl: './custom-tooltip.component.html',
  styleUrls: ['./custom-tooltip.component.scss'],
})
export class CustomTooltipComponent implements ITooltipAngularComp {

  public params: ITooltipParams;
  public data: any;

  constructor() { }

  agInit(params: ITooltipParams): void {
    this.data = params.api.getDisplayedRowAtIndex(params.rowIndex).data;
  }

}

<<<----------- tooltip component .html ---->>>

<span matTooltip="{{data.name}}"></span>

<div>
<p><span>Name: </span>{{data.name}}</p>
<p><span>Created by: </span>{{data.createdBy}}</p>
<p><span>Modified by: </span>{{data.modifiedBy}}</p>

</div>

期望工具提示以mat-tooltip格式显示希望toolTipParams：（）可以使用这种方法

Answer 1

就数据问题而言，您的StackBlitz与这个问题有点不同步，但是您需要确保数据对象上的属性与行数据上的属性具有相同的大小写；如果在tool-tip.component.html中将fname更改为fName，并且将lname更改为lName，则应该可以正确看到数据。

关于实质性工具提示，设计用途是您拥有一个具有span属性的元素（例如，matTooltip），然后将鼠标悬停在该元素上时，您将看到使用属性的内容。但是，您在这里使用它的方式是尝试渲染带有在ag-Grid渲染的工具提示中附加的材料工具提示的元素，这就是为什么您看到纯文本的原因。如果您确实希望绕过ag-Grid的工具提示渲染，而改用材质工具提示，那么custom cell renderer可能会带来更多的运气。

Answer 2

这并不完美，但是我可以使用{@ 1rian}上面提到的cellRendererFramework使其正常工作。这是我的修复程序的一个工作示例，该修复程序能够在成角度的ag-grid定制组件中使用[matTooltip]及其所有功能。包括换行符作为字符串数组传递。感谢您的所有帮助！

https://stackblitz.com/edit/angular-ag-grid-tooltip-example-ywzxle

如何使用物料工具提示为农业网格创建自定义工具提示组件

2 个答案: