如何使用 *ngFor 迭代对象键答案

【问题标题】：How to iterate object keys using *ngFor如何使用 *ngFor 迭代对象键
【发布时间】：2017-05-14 18:23:46
【问题描述】：

我想在 Angular 2 中使用 *ngFor 迭代 [object object]。

问题是对象不是对象数组，而是包含更多对象的对象对象。

{

  "data": {
    "id": 834,
    "first_name": "GS",
    "last_name": "Shahid",
    "phone": "03215110224",
    "role": null,
    "email": "test@example.com",
    "picture": **{ <-- I want to get thumb: url but not able to fetch that**
      "url": null,
      "thumb": {
        "url": null
      }
    },
    "address": "Nishtar Colony",
    "city_id": 2,
    "provider": "email",
    "uid": "test@example.com"
  }
}

我知道我们可以使用管道来迭代对象，但是我们如何从一个对象到另一个对象进一步迭代意味着 data->picture->thum:url。

【问题讨论】：

复制stackoverflow.com/questions/37046138/…
您可能正在寻找递归函数。
我看这里没有什么困难，如果你有对象数组，你可以很容易地用 ngFor 迭代
@Umar : 你能不能把它们放两个，这样我们才能有更大的图景？
@Milad 不是对象数组，这是主要问题。那是整个打包的对象，其中包含更多对象，例如 data->picture->thumb->url 。我想访问 thumb0->url

标签： angular ionic2

【解决方案1】：

您必须创建自定义管道。

import { Injectable, Pipe } from '@angular/core';
@Pipe({
   name: 'keyobject'
})
@Injectable()
export class Keyobject {

transform(value, args:string[]):any {
    let keys = [];
    for (let key in value) {
        keys.push({key: key, value: value[key]});
    }
    return keys;
}}

然后在你的 *ngFor 中使用它

*ngFor="let item of data | keyobject"

【讨论】：

我已经完成了，问题是 ngFor 与对象数组一起使用，在我的情况下，这不是对象数组，对象到对象，然后进一步对象到对象，比如这个数据->图片->拇指->网址。

【解决方案2】：

Angular 6.0.0

https://github.com/angular/angular/blob/master/CHANGELOG.md#610-2018-07-25

介绍了KeyValuePipe

另见https://angular.io/api/common/KeyValuePipe

@Component({
  selector: 'keyvalue-pipe',
  template: `<span>
    <p>Object</p>
    <div *ngFor="let item of object | keyvalue">
      {{item.key}}:{{item.value}}
    </div>
    <p>Map</p>
    <div *ngFor="let item of map | keyvalue">
      {{item.key}}:{{item.value}}
    </div>
  </span>`
})
export class KeyValuePipeComponent {
  object: {[key: number]: string} = {2: 'foo', 1: 'bar'};
  map = new Map([[2, 'foo'], [1, 'bar']]);
}

原创

你可以使用管道

@Pipe({ name: 'keys',  pure: false })
export class KeysPipe implements PipeTransform {
    transform(value: any, args: any[] = null): any {
        return Object.keys(value)//.map(key => value[key]);
    }
}

<div *ngFor="let key of objs | keys">

另见How to iterate object keys using *ngFor?

【讨论】：

感谢您的回复！通过这种方法，我现在可以访问图片-> url，但不能访问图片-> 拇指-> url。如何进一步迭代它..
对不起，我不明白评论的内容。为什么无法访问图片->拇指->网址？也许[src]="posts[key].thumb.url"？
不客气。很高兴听到你可以让它工作。
我有另一个 json 响应，我使用与上述相同的方法，但出现错误，无法将未定义或 null 转换为对象。这是一个json响应。 { "id": 1, "food": "McDonalds Sharebox Chicken Plus (Drink - Coke)", "user_id": 834, "rating_id": null, "runner_id": 43, }
添加到 6.1.0

【解决方案3】：

如果您在响应中使用map() 运算符，则可以将toArray() 运算符链接到它...然后您应该能够遍历新创建的数组...至少这对我有用:)

【讨论】：

对象不使用 toArray

【解决方案4】：

我会这样做：

<li *ngFor="let item of data" (click)='onclick(item)'>{{item.picture.url}}</li>

【讨论】：

【解决方案5】：

我认为最优雅的方法是像这样使用 javascript Object.keys（我首先为此实现了一个管道，但对我来说，它只是让我的工作变得不必要）：

在组件中将对象传递给模板：

Object = Object;

然后在模板中：

<div *ngFor="let key of Object.keys(objs)">
   my key: {{key}}
   my object {{objs[key] | json}} <!-- hier I could use ngFor again with Object.keys(objs[key]) -->
</div>

如果您有很多子对象，您应该创建一个组件来为您打印对象。通过根据需要打印值和键，并在递归调用自身的子对象上。

Hier 你可以找到这两种方法的 stackblitz 演示。

【讨论】：

不确定这是否是理想的方式！但它有效。似乎是满足我要求的最佳解决方案。
这太完美了！在过去的 30 分钟里，我一直在寻找这个！在这样的对象上完全按预期工作：[nosings: {a : 1, b: 2}, communal_carpets: {a:1, b:2, c:3}]

【解决方案6】：

1.创建自定义管道以获取密钥。

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'keys'
})
export class KeysPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return Object.keys(value);
  }
}

在 Angular 模板文件中，您可以使用 *ngFor 并迭代您的对象对象

<div class ="test" *ngFor="let key of Obj | keys">
    {{key}}
    {{Obj[key].property}
<div>

【讨论】：

【解决方案7】：

我知道这个问题已经得到解答，但我有一个相同的解决方案。

您也可以在*ngFor 中使用Object.keys() 来获得所需的结果。

我在 stackblitz 上创建了一个演示。我希望这会对您/其他人有所帮助/指导。

代码片段

HTML 代码

<div *ngFor="let key of Object.keys(myObj)">
  <p>Key-> {{key}} and value is -> {{myObj[key]}}</p>
</div>

.ts 文件代码

Object = Object;

myObj = {
    "id": 834,
    "first_name": "GS",
    "last_name": "Shahid",
    "phone": "1234567890",
    "role": null,
    "email": "test@example.com",
    "picture": {
        "url": null,
        "thumb": {
            "url": null
        }
    },
    "address": "XYZ Colony",
    "city_id": 2,
    "provider": "email",
    "uid": "test@example.com"
}

【讨论】：

stackblitz.com/edit/angular-iterator-stringobj你能看看这个
stackoverflow.com/questions/55589669/…

【解决方案8】：

Angular 现在有一种类型的迭代对象正好用于这种情况，称为 Set。当我发现这个问题搜索时，它符合我的需求。您创建集合，将其“添加”到它，就像您“推”到一个数组一样，然后像数组一样将其放入 ngFor 中。没有管道或任何东西。

this.myObjList = new Set();

...

this.myObjList.add(obj);

...

<ul>
   <li *ngFor="let object of myObjList">
     {{object}}
   </li>
</ul>

【讨论】：

myObjList 使用什么类型？当我尝试它时，我的 linter 说：Type 'Set<any>' is not assignable to type 'IMyInterface'
感谢 Set 的提醒。

【解决方案9】：

在对模板中的嵌套循环进行了大量故障排除后，我发现这对我的使用效果更好：

（一方面我试图迭代 agm-polygon 并且它不允许我嵌套 div）。

在component.ts中：

Object = Object

values= Object.values(this.arrayOfObjects)

在component.html中：

<div *ngFor='let value of values'>{{value.property}}</div>

一旦您检索到这些值，您就拥有了一个 Iterable，并且无需担心还遍历模板中的键，这可能会变得复杂且看起来很混乱。

【讨论】：

【解决方案10】：

在 Angular HTML 模板中循环遍历对象

在Angular中引入keyValuePipe：请参考https://angular.io/api/common/KeyValuePipe

快速代码：

<p>Object</p>
    <div *ngFor="let item of object | keyvalue">
      {{item.key}}:{{item.value}}
    </div>
    <p>Map</p>
    <div *ngFor="let item of map | keyvalue">
      {{item.key}}:{{item.value}}
    </div>

【讨论】：