Javascript 渲染后应用jquery会导致角度错误

我试图根据字符串的字符数截断字符串，如果字符数大于21，则添加省略号

我使用

jquery

在html的div上添加了一个truncate类。一切正常，但当页面被刷新时，文本会显示一秒钟，然后这个truncate类会被应用到页面上

这是我的

html

代码：

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

如果

text1

和

text2

是

text1=“我的名字是xyz”

，我得到的结果是这样的

最终结果：

“我的名字是xyz，你好……”

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

jquery

---

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

您使用的是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;
}

---

}

我试过了，但又遇到了同样的问题，它显示了一会儿，然后省略号被应用到了上面。我刚刚用$Here替换了您的jquery变量。您可以看看更新后的代码。您尝试了两种解决方案，但在我的情况下都不起作用。基本上，我是从api得到结果的，我们在每个按钮上调用api。当我们得到响应时，我们将其分配给result，然后这个变量将显示在dom上。之后，截断逻辑开始工作。因此，分配给变量和应用截断逻辑之间的时间差会在dom上显示该变量。基本上，使用jquery解决方案，我仍然会显示一段时间的文本。然后直接在html中应用这样的逻辑{{（result.text1&&result.text1.length>21？（result.text1.substr（0，21）+“…）：result.text1）+“，”}。这个解决方案对我很有效。这是stackblitz链接

text2="Hello Mr.xyz"

<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;
}

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