如何在Angular中移除插值数据中的空白字符？代码场景求助

我看你现在遇到的问题是表格里出现了大量空白单元格，这是当前模板逻辑导致的，先看看你现有的代码：

<tr *ngFor="let data of consultant; let id = index"> 
  <!-- <td>{{ id + 1 }}</td> --> 
  <td>{{ data.name }}</td> 
  <td *ngFor="let client of allClients; let i = index;"> 
    <p *ngIf="data.id === client.consultants.id"> {{client.name}}{{i === allClients.length - 1 ? '' : ', ' }} </p> 
  </td> 
  <td>{{ data.address }}</td> 
  <td>{{ data.email }}</td> 
</tr>

问题根源 #

你现在的逻辑是给每个顾问遍历所有客户，每一个客户对应一个<td>单元格——只有当客户的顾问ID匹配时，这个单元格才会显示内容，不匹配的单元格就会是空的，这就是空白的来源。但实际上你想要的应该是单个单元格里显示该顾问对应的所有客户名称，而不是每个客户占一个单元格。

解决方案 #

我们可以调整模板逻辑，先过滤出当前顾问对应的客户列表，再把名称拼接成字符串显示，这样就只会生成一个<td>，不会有空单元格。

方案1：直接在模板中过滤并拼接（快速实现）

修改第二个<td>部分的代码，去掉遍历所有客户的*ngFor，换成过滤+拼接的逻辑：

<tr *ngFor="let data of consultant; let id = index"> 
  <!-- <td>{{ id + 1 }}</td> --> 
  <td>{{ data.name }}</td> 
  <!-- 过滤出当前顾问的客户，拼接名称 -->
  <td>
    {{ allClients.filter(client => client.consultants.id === data.id).map(client => client.name).join(', ') }}
  </td> 
  <td>{{ data.address }}</td> 
  <td>{{ data.email }}</td> 
</tr>

方案2：组件内预处理数据（性能更优）

如果你的客户数据量比较大，模板里频繁用filter会影响性能，建议在组件里先给每个顾问关联好对应的客户列表：

// 组件.ts文件中的代码，在获取consultant和allClients数据后执行
this.consultant = this.consultant.map(cons => ({
  ...cons,
  // 给每个顾问添加对应的客户列表
  assignedClients: this.allClients.filter(client => client.consultants.id === cons.id)
}));

然后模板里直接使用预处理好的数据：

<tr *ngFor="let data of consultant; let id = index"> 
  <!-- <td>{{ id + 1 }}</td> --> 
  <td>{{ data.name }}</td> 
  <td>{{ data.assignedClients.map(client => client.name).join(', ') }}</td> 
  <td>{{ data.address }}</td> 
  <td>{{ data.email }}</td> 
</tr>

这样调整后，每个顾问对应的客户会在同一个单元格里用逗号分隔显示，不会再出现空白单元格了。

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