angular - 以 Angular 8 向服务器数据添加查看更多选项

Question

我的项目遇到问题。

我想向段落添加查看更多选项，并且该段落的数据来自服务器。

我知道如何向 HTML 段落添加 查看更多 选项，但我不知道如何向来自服务器的数据添加 查看更多 选项.

<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 选项，如果它超过 more多于两行。

谁能帮我解决这个问题？

Answer 1

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>