Angular中如何基于特定行值分组展示不同表格？

没问题，我帮你搞定这个分组生成表格的需求！在Angular里实现这个其实很简单，分两步走：先在组件里把数据按fruit字段分组，再在模板里循环渲染每个分组对应的表格。

第一步：组件内实现数据分组 #

在你的组件类里，我们可以用数组的reduce方法把原始数据按fruit字段整理成分组对象，再提取出所有不重复的水果名称方便后续循环。

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

@Component({
  selector: 'app-fruit-tables',
  templateUrl: './fruit-tables.component.html',
  styleUrls: ['./fruit-tables.component.css']
})
export class FruitTablesComponent {
  // 你的原始数据
  originalData = [
    { "fruit":"apple", "country": "A" },
    { "fruit":"banana", "country": "b" },
    { "fruit":"apple", "country": "C" },
    { "fruit":"banana", "country": "D" }
  ];

  // 计算属性：按fruit分组后的数据，格式为 { 水果名: [对应数据数组] }
  get groupedFruits() {
    return this.originalData.reduce((groups, item) => {
      // 如果担心大小写问题，可以统一转成小写：item.fruit.toLowerCase()
      const fruitKey = item.fruit;
      // 如果当前水果还没有分组，初始化一个空数组
      if (!groups[fruitKey]) {
        groups[fruitKey] = [];
      }
      // 把当前数据项加入对应分组
      groups[fruitKey].push(item);
      return groups;
    }, {} as { [key: string]: typeof this.originalData });
  }

  // 获取所有不重复的水果名称，用于模板循环
  get fruitNames() {
    return Object.keys(this.groupedFruits);
  }
}

第二步：模板里渲染分组表格 #

在HTML模板中，我们先遍历所有不重复的水果名称，为每个水果生成独立的标题和表格，再在表格内遍历该水果对应的所有数据项。

<!-- 遍历每个水果，生成对应表格 -->
<div *ngFor="let fruit of fruitNames">
  <!-- 水果标题，用titlecase管道让首字母大写更美观 -->
  <h3>{{ fruit | titlecase }}</h3>
  
  <!-- 当前水果对应的表格 -->
  <table border="1" cellpadding="8">
    <thead>
      <tr>
        <th>Fruit</th>
        <th>Country</th>
      </tr>
    </thead>
    <tbody>
      <!-- 遍历当前水果下的所有数据条目 -->
      <tr *ngFor="let item of groupedFruits[fruit]">
        <td>{{ item.fruit }}</td>
        <td>{{ item.country }}</td>
      </tr>
    </tbody>
  </table>
  
  <!-- 表格之间加个换行分隔，视觉上更清晰 -->
  <br>
</div>

这样运行后，就会自动根据fruit字段的不同生成对应数量的独立表格，不管有5种还是更多水果，都能自动适配~

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