当前的 Angular ag-grid 工具提示示例不起作用。
https://stackblitz.com/edit/angular-ag-grid-tooltip-example-fb7nko
Javascript/ typescript 。运行 Angular 8 和最新的 ag-grid 版本。我试图按照 plunker 的例子去做 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: () 使用这种方法
最佳答案
它并不完美,但我能够在使用上面@adrian 提到的 cellRendererFramework
时让它工作。这是我修复的一个工作示例,它能够在 Angular ag-grid 自定义组件中使用具有所有功能的 [matTooltip]
。包括作为字符串数组传递的换行符。感谢所有的帮助!
https://stackblitz.com/edit/angular-ag-grid-tooltip-example-ywzxle
关于javascript - 如何使用 Material 工具提示为 ag-grid 制作自定义工具提示组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57698987/