在 angular 8 中添加查看更多选项到服务器数据

Question

我的项目遇到问题。

我想向段落添加 see more 选项，该段落的数据来自服务器。

我知道如何将 see more 选项添加到 HTML 段落，但我不知道如何将 see more 选项添加到来自服务器的数据。

<p>Jayesh Vyas Jayesh Vyas Jayesh Vyas Jayesh Vyas Jayesh Vyas 
Jayesh Vyas Jayesh Vyas Jayesh Vyas Jayesh Vyas Jayesh Vyas 
Jayesh Vyas Jayesh Vyas <span id="dots">...</span>
<span id="more">Jayesh Vyas Jayesh Vyas Jayesh Vyas Jayesh Vyas 
Jayesh Vyas Jayesh Vyas Jayesh Vyas Jayesh Vyas Jayesh Vyas 
Jayesh Vyas Jayesh Vyas Jayesh Vyas Jayesh Vyas Jayesh Vyas 
Jayesh Vyas Jayesh Vyas Jayesh Vyas Jayesh Vyas Jayesh Vyas 
Jayesh Vyas Jayesh Vyas Jayesh Vyas .</span></p>
<button onclick="myFunction()" id="myBtn">Read more</button>

JavaScript代码

<script>
function myFunction() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more"; 
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less"; 
    moreText.style.display = "inline";
  }
}
</script>

所以你可以看到上面我尝试了上面的一段代码，它对我来说工作正常。

但在我的项目中，HTML组件如下所示。

<div  class="col-12 col-lg-12" *ngFor="let post of rec?.attributes?.Postings | filter : searchText | filter:filterText; let i=index">
<div class="col-12 noRightPadding" style="overflow-wrap: break-word;white-space: pre-line;word-break:break-all;
">{{post?.attributes?.Message}} </div>
</div>

您可以看到该段落以 post.attributes.Message 形式出现，如果它超过两行，我不知道如何为此添加 see more 选项。

谁能帮我解决这个问题？

Answer 1

您可以这样做：

<p class="text-center">{{ post.attributes.Message.length <= 50 ? post.attributes.Message : post.attributes.Message.substring(0, 50) + '...' }}</p>

如果您的文本包含超过 50 个字符，则它只会显示 50 个字符。

Answer 2

我强烈建议您使用 word-wrap 和 text-overflow CSS 属性。

示例：https://codepen.io/doliG/pen/oNjrVBK

使用angular，切换函数可以简单地改变一个布尔值

class MyComponent {
  showFullText = false;

  toggle() {
    this.showFullText = !this.showFullText;
  }
}

然后在模板中，类似

<p [class.something]="showFullText">{{ veryLongText }}</p>

祝你好运。

Answer 3

Demo 您可以使用 if 条件来完成，并为每个元素再创建一个属性，例如 post?.attributes?.isMore 作为默认 false

   <div  class="col-12 col-lg-12" >
        <div class="col-12 noRightPadding">
           {{ post?.attributes?.Message.length>100 ? post?.attributes?.Message.substring(0,10)+'...': post?.attributes?.Message}} 
            <a *ngIf=" post?.attributes?.Message.length>10"(click)="post?.attributes?.isMore=!post?.attributes?.isMore">{{!post?.attributes?.isMore && post?.attributes?.Message.length>10 ? 'Read More' : 'Read Less' }}</a> </div> 
      </div>
    </div>

在 angular 8 中添加查看更多选项到服务器数据

Add see more option to the server data in angular 8

angular

angular8