截断段落前 25 个字符并隐藏段落 Angular 8 的其余内容

问题描述

我有超过 100 个字符的段落。我想首先只加载初始 25 个字符并隐藏其余的字符。我想在 25 个字符旁边插入“更多”链接。单击更多链接后，接下来的 25 个字符将显示为“更多”链接。单击更多链接后，接下来的 25 个字符将显示“更多”链接，直到段落结束。段落是动态生成的，它在一个表格中。

我不确定如何实现这一目标。请指导我。

data
rows = [
      {,"ID" : "3","TextContent" : "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters,as opposed to using 'Content content here',making it look like readable English. Many desktop publishing packages and web page editors Now use Lorem Ipsum as their default model text.It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters,making it look like readable English. Many desktop publishing packages and web page editors Now use Lorem Ipsum as their default model text. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters,making it look like readable English. Many desktop publishing packages and web page editors Now use Lorem Ipsum as their default model text.",},{ 
       "ID" : "1","TextContent" : "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.",}
 ]
 
 <table id="users">
    <th *ngFor = "let column of headers">
        {{column}}
      </th>
      <tr *ngFor = "let row of rows">
          <td>
            {{row.ID}}
          </td>
         
          <td>
            {{row.TextContent}}
          </td>
        </tr> 
      
</table>

 

解决方法

我相信你想做这样的事情 https://stackblitz.com/edit/angular-ivy-m8hutt?file=src/app/app.component.html

您可以使用截断管道将段落截断为 25 个字符，然后使用行数据数组中的标志变量显示/隐藏完整段落