Angular实现表格每行展示对应实体关联的详情数量

问题原因 #

你当前代码里的numberDetails是遍历全部详情记录算出来的总条数，没有和每行实体的唯一标识entityId做关联匹配，所以所有行都会统一显示这个全局总数，自然没法区分每个实体各自关联的详情数。

具体改法 #

第一步：在组件TS代码中加按实体统计的逻辑 #

两种方案按需选择即可：

方案一：直接写计数方法（适合数据量小的场景，代码简单）

删掉原来全局累加numberDetails的那段逻辑，加一个通用方法，传入实体ID就能返回对应关联的详情数量：

getEntityDetailCount(entityId: number): number {
  // 过滤出所有entityId和传入参数匹配的详情，返回数组长度就是对应数量
  return this.entityDetails.filter(detail => detail.entityId === entityId).length;
}

方案二：提前构建计数映射（适合数据量大的场景，性能更好）

如果实体和详情的数据量都比较大，模板渲染时每次调用方法遍历全量详情会产生不必要的性能损耗，可以在拿到详情列表数据的第一时间，提前算好每个实体ID对应的详情数，存到Map里复用：

// 组件内声明映射表，key是entityId，value是对应关联的详情数量
entityDetailCountMap = new Map<number, number>();

// 在接口请求拿到entityDetails数据的回调里，调用这个方法构建映射
countDetailsByEntity() {
  this.entityDetailCountMap.clear();
  this.entityDetails.forEach(detail => {
    if (!detail.entityId) return;
    const oldCount = this.entityDetailCountMap.get(detail.entityId) || 0;
    this.entityDetailCountMap.set(detail.entityId, oldCount + 1);
  });
}

如果后续有新增、删除详情的操作，操作完重新调用一次countDetailsByEntity()就能同步更新计数。

第二步：修改表格模板的绑定 #

把原来详情列绑定全局numberDetails的代码换掉：

• 用方案一的话，对应单元格代码改成：

<td>{{ getEntityDetailCount(item.entityId) }}</td>

• 用方案二的话，对应单元格代码改成：

<td>{{ entityDetailCountMap.get(item.entityId) || 0 }}</td>

后面的|| 0是为了处理没有关联任何详情的实体，避免单元格显示空值。

额外语法修正 #

你原来的table标签重复写了三次class属性，Angular不会识别后面重复的属性，需要把多个class合并到同一个属性里：

<table class="table table-striped signalsTable mat-elevation-z8">

改完之后渲染表格时，每行都会拿当前实体的ID匹配对应的详情数，关联3条就显示3，关联1条就显示1，完全符合预期效果。

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