Angular修改历史记录表格为名称-值两列展示的技术问询

组件代码修改 #

首先调整history数组的结构，将每个对象转换为键值对数组，每个元素包含name（显示名称）和value（对应值），同时可结合翻译服务优化字段名称的可读性：

export class AllDataEntryHistoryComponent implements OnInit {
  constructor(private translateService: TranslateService) {}
  @Input() modificationHistory: any;
  history: { name: string; value: any }[][] = []; // 更新类型为键值对数组的数组

  ngOnInit(): void {
    if (this.modificationHistory && this.modificationHistory.changeLogDtos) {
      this.history = this.modificationHistory.changeLogDtos
        .filter((entry: ChangeLogDto) => entry.type === 'REFUSAL_OF_ENTRY')
        .flatMap((entry: ChangeLogDto) => entry.changeLogEntries)
        .map((entry: ChangeLogEntryDto) => {
          // 将每个字段转换为名称-值对，可根据需求替换为翻译后的文本
          return [
            { name: 'No.', value: entry.lp },
            { name: this.translateService.instant('OBJECT_ID'), value: entry.objectId },
            { name: this.translateService.instant('REGISTRAR_FIRSTNAME'), value: entry.registrarName },
            { name: this.translateService.instant('REGISTRAR_SURNAME'), value: entry.registrarSurname },
            { name: this.translateService.instant('REGISTRAR_ID'), value: entry.registrarId },
            { name: this.translateService.instant('ENTRY_DATE'), value: entry.entryDate },
            { name: this.translateService.instant('MODIFIER_FIRSTNAME'), value: entry.registrarModName },
            { name: this.translateService.instant('MODIFIER_SURNAME'), value: entry.registrarModSurname },
            { name: this.translateService.instant('MODIFIER_ID'), value: entry.registrarModId },
            { name: this.translateService.instant('MODIFICATION_DATE'), value: entry.modificationDate },
            { name: this.translateService.instant('STATE'), value: entry.state }
          ];
        });
    }
  }
}

如果不需要翻译，直接用固定友好名称即可：

return [
  { name: 'No.', value: entry.lp },
  { name: 'Object ID', value: entry.objectId },
  { name: 'Registrar Firstname', value: entry.registrarName },
  { name: 'Registrar Surname', value: entry.registrarSurname },
  { name: 'Registrar ID', value: entry.registrarId },
  { name: 'Entry Date', value: entry.entryDate },
  { name: 'Modifier Firstname', value: entry.registrarModName },
  { name: 'Modifier Surname', value: entry.registrarModSurname },
  { name: 'Modifier ID', value: entry.registrarModId },
  { name: 'Modification Date', value: entry.modificationDate },
  { name: 'State', value: entry.state }
];

模板代码修改 #

简化模板结构，遍历每个历史条目，以**两列（名称、值）**的形式纵向展示内容，无需再使用mat-table的复杂表头配置：

<!-- 遍历每个历史记录条目 -->
<div *ngFor="let entryGroup of history; let entryIndex = index" class="history-entry">
  <!-- 显示条目序号 -->
  <h4>No. {{ entryIndex + 1 }}</h4>
  <!-- 用普通表格展示名称-值对 -->
  <table class="history-table">
    <tr *ngFor="let item of entryGroup">
      <td class="field-name"><strong>{{ item.name }}</strong></td>
      <td class="field-value">{{ item.value }}</td>
    </tr>
  </table>
  <!-- 添加分隔线区分不同条目 -->
  <hr *ngIf="entryIndex < history.length - 1">
</div>

可添加基础CSS优化样式（可选）：

.history-entry {
  margin: 16px 0;
}

.history-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}

.history-table td {
  padding: 8px 12px;
  border-bottom: 1px solid #eee;
}

.field-name {
  width: 30%;
  font-weight: bold;
}

关键说明 #

1. 结构转换：将原来的扁平化对象转换为键值对数组，让模板可以轻松遍历展示名称和对应值
2. 简化模板：抛弃了原来每行多列的mat-table结构，改用更适合纵向展示的普通表格，减少冗余代码
3. 可读性优化：通过翻译服务或固定友好名称替换原字段名，让展示内容更易懂

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