遍历对象数组并获取关键 Angular 2答案

【问题标题】：Iterate over an array of Objects and get the key Angular 2遍历对象数组并获取关键 Angular 2
【发布时间】：2017-06-08 16:48:12
【问题描述】：

您好，我的数据结构如下：

list = [{id: "test", name: "name1"}, {id: "test1", name: "name2"}, ..]

我想在我的表中显示键（id 和名称）。由于我没有找到任何 buitin 管道，因此我创建了一个自定义管道。

@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push({key: key, value: value[key]});
    }
    return keys;
  }
}

但在我的 html 中，我只得到 0, 1 , 2, ... 作为键。知道这里发生了什么错误吗？

【问题讨论】：

你的模板是什么样的？
你真正想展示什么？你有一个对象数组，为什么不按原样迭代它呢？ <div *ngFor="let item of list">{{item.id}} {{item.name}}</div>可能是我误会了:)

标签： angular

【解决方案1】：

也许这会有所帮助：

@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    Object.keys(value).forEach(function(key){
      keys.push({key: key, value: value['value']});
    }); 

    return keys;
  }
}

【讨论】：

【解决方案2】：

尝试这样的事情，我没有尝试过，但它应该可以工作。问题是你正在迭代数组，而不是对象。然后，你说“key”的地方是数组的index，这就是你得到“0,1,2”的原因。你的桌子是这样的吗？：

ID    NAME
id1   name1
id2   name2
...   ...

【讨论】：

不是阿尔贝托的期望。
拥有动态长度的键（ej：id、name、age等）？