Angular 8 表格内动态段落如何实现每次展开25字符带More链接

核心逻辑是为每一行表格的文本绑定独立的展开状态，避免全局状态造成不同行的展开/收起逻辑互相干扰，完全匹配你提出的截断规则：

• 总长度≤100字符的文本：直接全量展示，不显示More入口
• 总长度>100字符的文本：首次加载仅展示前25个字符，后面跟More链接
• 每次点击More，给当前行的展示长度加25，直到展示长度等于文本总长度，More链接自动隐藏

组件TS逻辑（适配Angular8版本语法） #

首先给表格行补充独立的状态字段，用来记录当前这行已经展示了多少字符，避免模板内频繁做计算影响性能：

// 定义行数据类型，规避Angular8严格模式下的TS报错
interface TableRow {
  ID: string;
  TextContent: string;
  displayLength: number; // 新增：记录当前行已经展示的字符数
}

rows: TableRow[] = [];
headers = ['ID', 'TextContent']; // 补全你原本缺失的headers定义

ngOnInit() {
  // 你原本的原始表格数据
  const originRows = [
    {
      "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."
    }
  ];

  // 给每一行初始化展示长度，匹配截断规则
  this.rows = originRows.map(row => ({
    ...row,
    // 长度超过100的文本，初始只展示25个字符；短文本直接全展示
    displayLength: row.TextContent.length > 100 ? 25 : row.TextContent.length
  }));
}

// 点击More的处理方法，每次追加25个字符
showMore(row: TableRow) {
  // 取当前展示长度+25和文本总长度的较小值，避免超过文本范围
  row.displayLength = Math.min(row.displayLength + 25, row.TextContent.length);
}

模板HTML改造（基于你原本的表格代码） #

<table id="users">
  <th *ngFor="let column of headers">
    {{column}}
  </th>
  <tr *ngFor="let row of rows">
    <td>
      {{row.ID}}
    </td>
    <td>
      <!-- 截取对应长度的文本进行展示 -->
      {{row.TextContent.slice(0, row.displayLength)}}
      <!-- 只要当前展示长度没到文本总长度，就显示More链接 -->
      <a *ngIf="row.displayLength < row.TextContent.length" 
         (click)="showMore(row)" 
         style="cursor: pointer; margin-left: 4px; color: #1976d2;">
        More
      </a>
    </td>
  </tr> 
</table>

• 这个实现没有依赖任何第三方库，完全兼容Angular8的核心语法，不需要额外安装依赖
• 不管表格数据是静态写死还是动态从接口拉取，只要在拿到原始数据后统一用map逻辑初始化displayLength属性，就可以无缝适配动态生成的内容，不需要额外改造
• 把展示长度的状态存在行对象上的方式，在表格数据量较大时，比模板内实时计算截断范围的性能更好，不会触发不必要的变更检测
• 规则阈值可以灵活调整：比如想改首次展示30个字符、每次追加30个字符，只要修改初始化时的25值、showMore方法里的25值即可

内容的提问来源于stack exchange，提问作者sarasm