截短段落前25个字符并隐藏段落的其余内容角度8

Question

我有超过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, 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个字符，然后使用行数据数组中的标志变量显示/隐藏整个段落