Angular 4：避免硬编码name，动态结合ngIf与ngFor渲染数据

嗨Neha！作为Angular新手遇到这种重复代码的问题太正常了，我来帮你改成动态生成的方式——完全不用硬编码A/B/C/D这些名称，而且绝对不会改动你的原始JSON结构~

第一步：在组件里处理数据分组 #

首先我们需要把原始数据按name字段分组，同时提取所有唯一的日期用于表头。在你的组件类里添加这些代码：

// 假设你的原始JSON数据存在这个变量里
originalData = [{"name": "A", "date": "2017-01-01", "value": "103.57"}, ...]; // 你的完整数据

groupedData: { [key: string]: { date: string, value: string }[] } = {};
uniqueDates: string[] = [];
names: string[] = []; // 存储所有唯一的name

ngOnInit() {
  // 1. 收集所有唯一的日期，用于生成表头
  const dateSet = new Set(this.originalData.map(item => item.date));
  this.uniqueDates = Array.from(dateSet).sort(); // 排序保证日期顺序，可根据需求调整

  // 2. 按name分组数据，把相同name的项放到一起
  this.groupedData = this.originalData.reduce((acc, item) => {
    if (!acc[item.name]) {
      acc[item.name] = [];
    }
    acc[item.name].push(item);
    return acc;
  }, {} as { [key: string]: { date: string, value: string }[] });

  // 3. 获取所有唯一的name，用于动态生成表格行
  this.names = Object.keys(this.groupedData);
}

// 辅助方法：根据name对应的项列表和日期，找到对应的值
getItemValue(items: { date: string, value: string }[], date: string): string {
  const matchedItem = items.find(item => item.date === date);
  return matchedItem ? matchedItem.value : ''; // 没有对应日期时显示空字符串
}

第二步：修改HTML模板，动态生成表格 #

现在我们可以用处理好的数据来动态生成表头和每一行，再也不用写重复的*ngIf="item.name == 'X'"了：

<table>
  <thead>
    <tr id="row">
      <!-- 动态遍历唯一日期，保持你原来的slice:0:8只显示前8个 -->
      <th class="align-right" *ngFor="let date of uniqueDates|slice:0:8">{{date}}</th>
    </tr>
  </thead>
  <tbody id="body" contenteditable='true'>
    <!-- 动态遍历每个name，生成对应的行 -->
    <tr class="align-right" *ngFor="let name of names">
      <!-- 遍历表头的日期，找到当前name对应日期的值 -->
      <td *ngFor="let date of uniqueDates|slice:0:8" 
          [(ngModel)]="getItemValue(groupedData[name], date)" 
          ngDefaultControl>
        {{getItemValue(groupedData[name], date)}}
      </td>
    </tr>
  </tbody>
</table>

为什么这样做？ #

• 完全摆脱硬编码：不管以后你的JSON里新增E、F还是其他name，表格都会自动生成对应的行
• 保留原始JSON结构：我们只是在组件里做了数据分组的处理，没有修改原始数据
• 更易维护：不用重复写相似的代码块，以后要调整逻辑只需要改一处

这样修改后，你的表格效果和原来完全一致，但灵活性大大提升啦！

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