jquery 在 Angular 渲染结果后得到应用

Question

我试图根据字符串的字符数截断字符串，然后如果字符数大于 21，则使用 append 省略号。

我使用 jquery 在 html 的 div 上添加了一个截断jquery 。 一切正常，但是当页面被刷新时，文本开始显示，然后这个截断 class 被应用到它上面。

这是我的html代码：

<span class="truncate">
    <span *ngIf="result.text1">
        {{result.text1 + "," }}
    </span>
    <span *ngIf="result.text2">
        {{result.text2 + "," }}
    </span>
</span>

这是我的 jquery 代码：

    setTimeout(() => {
    jQuery('.truncate').each(function (i) {
        if (jQuery(this).text().length > 21) {
            jQuery(this).text(
                jQuery(this)
                    .text()
                    .substr(0, 21) + '...'
            );
        }
    });

如果text1和text2是text1="My name is xyz" ，我得到的结果是这样的，

text2="Hello Mr.xyz"

最终结果： "My name is xyz, hello..."

我希望在文本在页面上呈现之前应用jquery 。

有什么办法可以延迟渲染吗？

Answer 1

您正在使用 Angular 所以您可以像这样直接使用 ngClass

<span class="truncate">
    <div *ngIf="result.text1" [ngClass]="{'text-ellipsis':result.text1.length > 25}">
        {{result.text1 + "," }} {{result.text1.length > 25}}
    </div>
<div *ngIf="result.text2" [ngClass]="{'text-ellipsis':result.text1.length > 25}>
        {{result.text2 + "," }}
    </div>
</span>

.text-ellipsis {
  white-space: nowrap;
  width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

如果您仍然想使用您的代码并解决渲染问题，请删除 setTimeout并将您的代码放入ngAfterViewInit中，如下所示。 这将在 html 页面加载后更新文本。

ngAfterViewInit() {
$(".truncate").each(function(i) {
  if ($(this).text().length > 21) {
    $(this).text(
      $(this)
        .text()
        .substr(0, 21) + "..."
    );
  }
});

}