如何使用 *ngFor 迭代对象键

Posted 2023-03-13

【中文标题】如何使用 *ngFor 迭代对象键

【英文标题】：How to iterate object keys using *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": "[e-mail]",
    "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": "[e-mail]"
  

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

【问题讨论】：

复制***.com/questions/37046138/…

您可能正在寻找递归函数。

我看这里没有什么困难，如果你有对象数组，你可以很容易地用 ngFor 迭代

@Umar : 你能不能把它们放两个，这样我们才能有更大的图景？

@Milad 不是对象数组，这是主要问题。那是整个打包的对象，其中包含更多对象，例如 data->picture->thumb->url 。我想访问 thumb0->url

【参考方案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": "[e-mail]",
    "picture": 
        "url": null,
        "thumb": 
            "url": null
        
    ,
    "address": "XYZ Colony",
    "city_id": 2,
    "provider": "email",
    "uid": "[e-mail]"

【讨论】：

stackblitz.com/edit/angular-iterator-stringobj你能看看这个

***.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>