Блог

Главная - Вопросы по программированию - Угловая 11 — та же мат-ячейка, переданная в чистую трубу

Угловая 11 — та же мат-ячейка, переданная в чистую трубу

#angular11 #angular-material-11

Вопрос:

Я пытаюсь показывать всплывающую подсказку только тогда, когда ширина прокрутки ячейки мата > Ширина клиента.

Итак, я создал следующую чистую трубу:

 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 в канал, чтобы проверить ее свойства.

Проблема в том, что он, похоже, передает одну и ту же ячейку мата для каждой строки.

При отображении значений element.scrollWidth и element.clientWidth в канале я вижу одинаковые значения для каждой строки, независимо от того, отображается ли полное содержимое или нет.

Заранее спасибо

Комментарии:

1. Обратите внимание, что включение логики в HTML, как показано здесь, работает, но я бы предпочел использовать чистый канал, которым можно поделиться: <mat-cell #company mat-cell *matCellDef=»пусть элемент» [matTooltip]=»(company.scrollWidth > company.clientWidth) ? элемент.desc : null»> {{элемент.desc}} ></mat-ячейка>

Метки: ,