Angular/PrimeNg 中的“查看更多文本”

Question

请指导我实现“查看更多文本”功能。

我从事 Angular 4 和 primgNg 的工作。我的页面显示一个名为“描述”的列。down arrow最初，我必须在该列中仅显示 1000 个字符，如果描述超过 1000 个字符，则显示。单击该down arrow段落将展开并显示全文，并且箭头变为up arrow。换句话说，切换。请指导我实现这一目标。到目前为止，我尝试如下但无法达到要求。

超文本标记语言

<div>Description</div>
<div>{{details.desc | slice:0:1000}}</div>
<div *ngIf="details.desc.length >= 1000">
  <span class="arrow-down"></span>
</div>

CSS

.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;

  border-top: 10px solid #f00;
}

Answer 1

我刚刚根据您在 StackBlitz.com 上的代码创建了工作示例

但更好的解决方案是将其作为指令并重用。

希望有帮助。