Angular 的 Kendo UI：带有外部内容的网格单元格上的工具提示答案

【问题标题】：Kendo UI for Angular: Tooltip on a grid cell with external contentAngular 的 Kendo UI：带有外部内容的网格单元格上的工具提示
【发布时间】：2021-11-30 10:49:52
【问题描述】：

Here 描述了如何在剑道网格单元上放置工具提示。然而，它只是关于包含来自锚元素的一些信息的工具提示，例如它的 title 属性。但是，整合锚点无法获得的外部信息的最佳方式是什么？就我而言，当我将鼠标悬停在网格项的特定单元格上时，我希望有一个工具提示显示网格项的最后一个编辑器的名称。该名称不是单元格内容的一部分。它还来自每个网格行的后端。如何访问它以获取工具提示？

<kendo-grid [height]="200"
            [data]="myModel">
  <kendo-grid-column field="one" title="First column" width="90"></kendo-grid-column>
  <kendo-grid-column field="two" title="Second column" width="60"></kendo-grid-column>
  <kendo-grid-column field="three" title="Third column" width="120"></kendo-grid-column>
</kendo-grid>

【问题讨论】：

我无法访问工具提示指令或模板中网格行的数据模型，我了解。我只能访问 HTML 锚元素。
到目前为止你尝试过什么？请提供一些代码。
我什么都没试过。我考虑过使用一些隐藏的列/单元格，我可以在其中加载所需的数据，然后使用 DOM 选择器从要显示工具提示的单元格开始访问它。我认为这对我有用，但听起来很麻烦......
所以，在我开始做一些疯狂的事情之前，我想先问问社区 :-)
请发布一些代码，以便社区更容易帮助您。您可以使用stackblitz.com 创建一个简单的演示。

标签： kendo-grid kendo-ui-angular2 kendo-tooltip

【解决方案1】：

好的，我解决了。解决方案是使用 ng-template 修改 kendo 列：

<kendo-grid-column title="My titel" width="90">
    <ng-template kendoGridCellTemplate let-dataItem>
                  <span kendoTooltip title="{{dataItem?.tooltipContent}}">
                    {{dataItem?.cellContent}}
                  </span>
    </ng-template>
</kendo-grid-column>

这样我将外部数据“走私”到单元格 HTML 元素。然后可以使用 kendo tooltip 指令轻松访问它。

【讨论】：