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

Question

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

我研究Angle 4和primgNg。我的页面显示名为“描述”的列。最初，如果描述超过1000个字符，那么我只能在该列中显示1000个字符，并显示down arrow。单击down arrow时，该段落将展开并显示全文，并且箭头变为up arrow。换句话说，切换。请指导我实现这一目标。到目前为止，我尝试了以下操作，但无法达到要求。

HTML

<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

我刚刚根据您的代码here on StackBlitz.com

创建了一个工作示例

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

希望有帮助。