0

我试图仅在 mat-cell 的 scrollWidth > clientWidth 时显示工具提示。

所以，我创建了以下纯管道：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'toolTip'
})
export class ToolTipPipe implements PipeTransform {
  transform(element: any, ...args: any[]): string {
    if (element.scrollWidth > element.clientWidth) {
      return args[0];
    } else {
      return '';
    }
  }
}

我将它用于表的每个特定列，如下所示：

<ng-container matColumnDef="company">
  <mat-header-cell mat-header-cell *matHeaderCellDef> Company </mat-header-cell>
  <mat-cell #company mat-cell *matCellDef="let element" [matTooltip]="company | toolTip : element.desc">
    {{element.desc}}
 </ng-container>

请注意，我使用标签引用#company，以便可以将 mat-cell 的引用传递给管道以检查其属性。

问题是它似乎为每一行传递了相同的 mat-cell。

在管道中显示 element.scrollWidth 和 element.clientWidth 的值时，我看到每一行的值都相同，无论是否显示完整内容。

提前致谢

4

0 回答 0