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

Question

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

我在 angular 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 创建了工作示例

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

希望有帮助。