Angular中使用*ngFor遍历对象获取键值对出现[object Object]异常求助

在Angular项目中使用*ngFor遍历对象时，页面输出显示为[object Object]，无法正确获取对象的键和值，页面下拉菜单中出现多个[object Object]条目。

相关代码片段 #

接口定义

export interface CustomColumn {
    [key: string]: boolean
}

AppComponent.ts

export class AppComponent {
  service = inject(DataService);
  displayedColumns: CustomColumn[] = [];
  respData = {} as ResponseData;
  ...

  async fetchServiceDatails(criteria: string) {
    await this.service.getDatails(criteria).subscribe({
      next: (resp) => {
        this.respData = resp;
        if (this.respData && this.respData.data) {
          this.displayedColumns = Object.entries(this.respData.data.entities).map(function (entry) {
            let customColumn: CustomColumn = {};
            customColumn = {
              [entry]: true
            };
            return customColumn;
          });
        }
      },
      error: (e) => {
        console.log('Error in fetching serviceDetails: ', e);
      }
    });
  } 
}

AppComponent.html

<ul class="dropdown-menu checkbox-menu allow-focus" aria-labelledby="dropdownMenu2">
    <li *ngFor="let item of displayedColumns | keyvalue">
        <label>
          <input type="checkbox" value="{{item.key}}"> {{item.key}}
        </label>
    </li>
</ul>

问题原因 #

核心问题出在Object.entries的处理逻辑上：Object.entries()返回的是[键名, 对应值]格式的数组，而代码中直接将整个entry数组作为CustomColumn对象的键。当数组作为对象键时，会被自动转为字符串，若对应值是对象类型，最终键名会变成[object Object]，导致页面输出异常。

解决方法 #

方法一：修正对象键的提取逻辑

修改fetchServiceDatails中的map函数，正确提取entry数组的第一个元素（即键名）作为CustomColumn的键：

async fetchServiceDatails(criteria: string) {
  await this.service.getDatails(criteria).subscribe({
    next: (resp) => {
      this.respData = resp;
      if (this.respData && this.respData.data) {
        this.displayedColumns = Object.entries(this.respData.data.entities).map(entry => {
          const customColumn: CustomColumn = {};
          // 提取entry数组的第一个元素作为键名
          customColumn[entry[0]] = true;
          return customColumn;
        });
      }
    },
    error: (e) => {
      console.log('Error in fetching serviceDetails: ', e);
    }
  });
}

模板无需修改，此时item.key会正确显示对应的列名。

方法二：简化数据结构（更推荐）

如果只需要键名来生成复选框，可以直接将displayedColumns定义为字符串数组，简化数据处理：

1. 修改组件中的类型定义和数据处理逻辑：

export class AppComponent {
  service = inject(DataService);
  // 改为字符串数组
  displayedColumns: string[] = [];
  respData = {} as ResponseData;
  ...

  async fetchServiceDatails(criteria: string) {
    await this.service.getDatails(criteria).subscribe({
      next: (resp) => {
        this.respData = resp;
        if (this.respData && this.respData.data) {
          // 直接提取所有键名存入数组
          this.displayedColumns = Object.keys(this.respData.data.entities);
        }
      },
      error: (e) => {
        console.log('Error in fetching serviceDetails: ', e);
      }
    });
  } 
}

2. 简化模板代码：

<ul class="dropdown-menu checkbox-menu allow-focus" aria-labelledby="dropdownMenu2">
    <li *ngFor="let column of displayedColumns">
        <label>
          <input type="checkbox" value="{{column}}"> {{column}}
        </label>
    </li>
</ul>

这种方式更简洁高效，避免了不必要的对象包装，直接使用键名数组遍历即可。

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