将更多的选项添加到角度8中的服务器数据中

问题描述 投票:1回答:1

我的项目遇到问题。

我想在段落中添加see more选项,并且该段落的数据来自服务器。

我知道如何向HTML段落添加see more选项,但是我不知道如何向来自服务器的数据添加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选项(如果超过两行的话。)>

有人可以帮我吗?

我的项目面临问题。我想在段落中添加查看更多选项,该段落的数据来自服务器。我知道如何在HTML段落中添加see more选项,但我不...

angular angular8
1个回答
0
投票

您可以执行以下操作:

© www.soinside.com 2019 - 2024. All rights reserved.