Angular2中遍历JSON对象键的技术实现咨询

我来帮你解决在Angular中遍历JSON对象键的问题，结合你给出的场景和代码，分两种常用场景来讲解：

一、在组件类（TypeScript）中遍历键 #

从你的代码片段看，你已经尝试用Object.keys()，但写法可能有点问题。针对你拿到的list数组（每个元素是{id: "", title: ""}这样的对象），可以这样处理：

1. 获取单个对象的所有键 #

如果想拿到list中某一个对象的键数组，比如第一个对象：

viewPage(page, per_page){
  this._adminPage.fetchAdminPageData(page, per_page).subscribe(
    data => {
      this.list = data.list;
      this.total_item = data.total;
      this.current_page = data.current_page;
      // 当list有数据时，获取第一个对象的键
      if(this.list.length > 0) {
        this.arrayOfKeys = Object.keys(this.list[0]);
        // 此时arrayOfKeys会是 ["id", "title"]
      }
    }
  )
}

2. 遍历数组中每个对象的键 #

如果要逐个处理list里每个对象的键和对应值：

this.list.forEach(item => {
  // 获取当前对象的所有键
  const keys = Object.keys(item);
  console.log(`当前对象的键：${keys}`);
  
  // 进一步遍历每个键，拿到对应的值
  keys.forEach(key => {
    console.log(`${key} 对应的值是：${item[key]}`);
  });
});

二、在模板中遍历键值对（用于页面渲染） #

如果需要把键和值直接渲染到页面上，Angular提供了很方便的方式：

1. 使用内置的KeyValuePipe（Angular 6.1+ 支持） #

这个管道可以直接把对象转换成键值对数组，在模板中用*ngFor遍历即可：

<!-- 先遍历list数组里的每个对象 -->
<div *ngFor="let item of list" class="data-item">
  <!-- 再遍历当前对象的键值对 -->
  <div *ngFor="let kv of item | keyvalue">
    <span>*键：{{kv.key}}</span>
    <span>*值：{{kv.value}}</span>
  </div>
</div>

如果需要对键进行排序，可以在组件类中定义一个比较函数，传给KeyValuePipe：

// 组件类中定义排序函数，按键的字母顺序排列
sortKeys(a: KeyValue<string, any>, b: KeyValue<string, any>): number {
  return a.key.localeCompare(b.key);
}

然后在模板中使用：

<div *ngFor="let item of list">
  <div *ngFor="let kv of item | keyvalue:sortKeys">
    <span>*键：{{kv.key}}</span>
    <span>*值：{{kv.value}}</span>
  </div>
</div>

2. 低版本Angular兼容方案 #

如果你的Angular版本低于6.1，没有KeyValuePipe，可以先在组件类中把对象转换成键值对数组，再传到模板：

// 在subscribe的回调里处理
data => {
  this.list = data.list;
  // 把每个对象转换成键值对数组
  this.keyValueItems = this.list.map(item => {
    return Object.keys(item).map(key => ({key: key, value: item[key]}));
  });
}

然后模板中遍历：

<div *ngFor="let item of keyValueItems">
  <div *ngFor="let kv of item">
    <span>*键：{{kv.key}}</span>
    <span>*值：{{kv.value}}</span>
  </div>
</div>

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