如何使用syncfusion表在angular中显示行悬停图标

npm install @syncfusion/ej2-angular-grids

import { Component, OnInit } from '@angular/core';
import { data } from './data'; // 假设你有一个名为data的数组来显示在表格中
import { enableRipple } from '@syncfusion/ej2-base'; 
import { TreeGridComponent, RowDDService } from '@syncfusion/ej2-angular-grids';
enableRipple(true);

public data: Object[] = data; // 假设data是你的行数据数组
public columns: Object[] = [
  { field: 'OrderID', headerText: 'Order ID', width: 120 },
  { field: 'CustomerID', headerText: 'Customer ID', width: 150 },
  { field: 'ShipCity', headerText: 'Ship City', width: 150 },
  // 其他列...
];

<ejs-treegrid #grid [dataSource]='data' [columns]='columns'>
</ejs-treegrid>

<ejs-treegrid #grid [dataSource]='data' [columns]='columns'>
  <ng-template #rowTemplate let-data>
    <tr [class]='getRowClass(data)'>
        <td [title]="data.OrderID">
            {{ data.OrderID }}
            <i class='fa fa-info-circle' style='float: right'></i> <!-- 这里使用了FontAwesome图标库的图标，你可以替换成其他图标库的图标 -->
        </td>
        <td [title]="data.CustomerID">{{ data.CustomerID }}</td>
        <td [title]="data.ShipCity">{{ data.ShipCity }}</td>
        <!-- 其他列... -->
    </tr>
  </ng-template>
</ejs-treegrid>

public getRowClass(data: Object): string {
  // 根据条件添加样式
  if (data.OrderID === 'ALFKI') {
    return 'highlight-row'; // 假设你定义了一个名为highlight-row的CSS类来定义高亮样式
  } else {
    return '';
  }
}