Мне было поручено отображать всплывающие подсказки в ячейках таблицы только тогда, когда содержимое усекается. Необходимо поддерживать одинаковую высоту таблицы во всех строках независимо от содержимого. Расширяемая строка не применима в этой ситуации. Таким образом, мы заставляем содержимое в ячейке таблицы не переносить и не показывать эллипсы, если они усечены с использованием CSS. Я использую Angular всплывающие подсказки и таблицы материалов.
Найденное мной решение создает ExpressionChangedAfterItHasBeenCheckedError при локальном запуске. Я хотел бы найти решение, которое не вызывает эту ошибку, если это возможно.
Я создал упрощенный пример StackBlitz: https://stackblitz.com/edit/angular-rmbt7g
К сожалению, ошибка не выдается на StackBlitz. Это происходит только в локальном режиме разработки.
HTML
- Я добавляю имя класса в каждую ячейку таблицы для усечение.
- Каждой ячейке таблицы присваивается переменная шаблона, которая используется для доступа к ячейкам текущей таблицы.
- В входном значении matTooltipDisabled текущие свойства ячеек таблицы scrollWidth и clientWidth используются для определения того, содержимое усекается.
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element" #positionColumn class="truncate" [matTooltip]="element.position" [matTooltipDisabled]="positionColumn.scrollWidth <= positionColumn.clientWidth"> {{element.position}} </td>
</ng-container>
CSS
Класс .trucate, используемый для того, чтобы содержимое ячейки таблицы не переносилось и показывало эллипсы если усечено.
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}