angular - 控制器中元素的角度检查溢出

Question

对于网格，有些字段可能有省略号，因为内容可能很大。

在这种情况下，应显示包含完整内容的工具提示。在组件代码中，我编写了一个方法来计算元素是否具有省略号，但是当将 dom 元素传递给组件时，this它指的是组件。

我怎样才能做到这一点？问题是这是在一个网格中，我不能elementRef为每一行添加一个。到目前为止我的代码：

<div [matTooltip]="item.displayname" [matTooltipDisabled]="hasNoOverflow(this)">
            {{item.displayname}}</div>

hasNoOverflow(element) {
    if (element.offsetHeight < element.scrollHeight ||
        element.offsetWidth < element.scrollWidth) {
        return false;
    } else {
        return true;
    }
}

标签： angulardomangular-materialtooltip

Answer 1

我能够将 dom 元素传递给组件：

<div #el [matTooltip]="item.displayname" [matTooltipDisabled]="hasNoOverflow(el)">
        {{item.displayname}}</div>