Angular中点击表格行后如何显示ngFor中的剩余元素？

核心思路 #

• 为每行单独维护展开状态，避免全局状态干扰
• 根据数组长度动态渲染：长度≤3时全量显示；长度>3时默认展示前3个元素，附加可点击的剩余计数标签，点击后切换展开状态显示全部元素

具体代码实现 #

1. 组件类（TypeScript） #

import { Component } from '@angular/core';

interface Item {
  id: number;
  tags: { name: string }[];
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  items: Item[] = [
    { id: 1, tags: [{name: 'Tag1'}, {name: 'Tag2'}, {name: 'Tag3'}, {name: 'Tag4'}, {name: 'Tag5'}] },
    { id: 2, tags: [{name: 'TagA'}, {name: 'TagB'}] },
    { id: 3, tags: [{name: 'TagX'}, {name: 'TagY'}, {name: 'TagZ'}, {name: 'TagW'}] }
  ];

  expandedRows: { [key: number]: boolean } = {};

  toggleExpand(itemId: number): void {
    this.expandedRows[itemId] = !this.expandedRows[itemId];
  }

  getDisplayTags(tags: { name: string }[], itemId: number): { name: string }[] {
    return this.expandedRows[itemId] ? tags : tags.slice(0, 3);
  }

  getRemainingCount(tags: { name: string }[]): number {
    return tags.length - 3;
  }
}

2. 模板文件（HTML） #

<p-table [value]="items">
  <ng-template pTemplate="header">
    <tr>
      <th>ID</th>
      <th>标签</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-item>
    <tr>
      <td>{{ item.id }}</td>
      <td>
        <p-chip *ngFor="let tag of getDisplayTags(item.tags, item.id)" [label]="tag.name" styleClass="mr-1"></p-chip>
        <span 
          *ngIf="item.tags.length > 3" 
          class="cursor-pointer text-primary"
          (click)="toggleExpand(item.id)"
        >
          {{ expandedRows[item.id] ? '收起' : '+' + getRemainingCount(item.tags) }}
        </span>
      </td>
    </tr>
  </ng-template>
</p-table>

3. 样式补充（CSS） #

.cursor-pointer {
  cursor: pointer;
}

关键细节说明 #

• expandedRows 对象通过行ID映射展开状态，确保每行的折叠/展开操作独立
• getDisplayTags 方法封装了标签列表的过滤逻辑，简化模板代码
• 计数标签的文案会根据展开状态动态切换，兼顾功能和交互体验

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