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

Question

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

内

我不确定如何实现。请指导我。

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, 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, 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.", 
             },
 
       { 
       "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>

Answer 1

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

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

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

Truncate paragraph first 25 character and hide rest content of paragraph Angular 8

truncate

string-length

angular