Angular TypeScript中如何不指定键名动态展示对象列表的键值对

你可以通过嵌套*ngFor遍历键值对的方式，无需硬编码键名即可动态渲染所有字段，以下是两种可选实现方式：

方法一：复用你已定义的键数组 #

第一步：优化TS代码，避免空数组报错 #

你现有代码中直接取数组第一项的键，如果接口返回空列表会抛出异常，先调整逻辑：

ngOnInit(): void {
    const Param = this.route.snapshot.queryParamMap.get('_id');
    this._crudService.GetReportById(Param).subscribe((res) => {
      this.MatchTransactions = res;
      this.FilteredMatchTransactions = this.MatchTransactions.onlyInFile1;
      // 先判断数组非空再取键，可通过filter过滤不需要展示的字段，比如_id
      if (this.FilteredMatchTransactions?.length) {
        this.KeysFilteredMatchTransactions = Object.keys(
          this.FilteredMatchTransactions[0]
        ).filter(key => key !== '_id'); // 不需要过滤就删掉这部分
      }
    });
}

第二步：修改模板，动态渲染列 #

把原来写死的三个<td>替换为遍历键数组的逻辑：

<tr
  *ngFor="
    let row of FilteredMatchTransactions
      | paginate
        : { itemsPerPage: itemsPerPage, currentPage: p };
    let i = index
  "
>
  <td *ngFor="let key of KeysFilteredMatchTransactions">
    {{ key }} : {{ row[key] }}
  </td>
</tr>

方法二：使用Angular内置KeyValuePipe（无需提前存储键数组） #

如果你不想额外维护键数组，可以直接用Angular提供的keyvalue管道，在模板层面直接遍历每个对象的键值对，TS代码中可以删掉KeysFilteredMatchTransactions相关的所有逻辑，模板直接改成：

<tr
  *ngFor="
    let row of FilteredMatchTransactions
      | paginate
        : { itemsPerPage: itemsPerPage, currentPage: p };
    let i = index
  "
>
  <!-- 括号里的() => 0是为了保留对象原有的键顺序，不需要保留顺序可以删掉这个参数 -->
  <td *ngFor="let item of row | keyvalue: (() => 0)">
    <!-- 如果要隐藏_id字段，加个*ngIf就行：*ngIf="item.key !== '_id'" -->
    {{ item.key }} : {{ item.value }}
  </td>
</tr>

注意事项 #

• 如果需要自定义表头，只需要在<thead>里遍历一次KeysFilteredMatchTransactions渲染<th>即可，不需要硬编码表头。
• 可以在模板中加*ngIf="FilteredMatchTransactions?.length"的判断，接口返回空数据时展示空状态提示，避免渲染异常。

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