如何在Angular中使用ngFor循环对象属性

Question

这篇文章是关于我在工作中发现的一个有趣问题.

如果你还不知道.我在谈论Angular 2+

问题

因此,您希望显示列表的标记,此列表的值来自后端,并且由于某种原因而不是您收到类似的旧对象数组.

    { 
  "car" : 
    { 
       "color" : "red",
       "model" : "2013"
    },
   "motorcycle": 
    { 
       "color" : "red",
       "model" : "2016"
    },
   "bicycle": 
    { 
       "color" : "red",
       "model" : "2011"
    }
}

然后尝试使用*ngFor但会出现一条错误消息:

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

你可以在后端修复它,这样你就可以得到一个对象数组,但是并不是没有时间.你不担心孩子,我有我们.

Answer 1

在Angular 6.1中引入了KeyValuePipe,它允许您迭代对象属性:

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

文档:https://angular.io/api/common/KeyValuePipe

Answer 2

我不知道这是否安全,但对于这些简单的情况我不喜欢管道解决方案,所以我通常使用:

<div *ngFor="let k of objectKeys(yourObject)">
    {{yourObject[k].color}}
</div>

并在控制器中:

objectKeys(obj) {
    return Object.keys(obj);
}

这是一个非常常见的情况,我不明白为什么没有像Angular.js 1.x那样的标准实现

Answer 3

更好的解决方案是使用这样的管道:

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

/**
 * Convert Object to array of keys.
 */
@Pipe({
  name: 'appProperties'
})
export class PropertiesPipe implements PipeTransform {

  transform(value: {}): string[] {

    if (!value) {
      return [];
    }

    return Object.keys(value);
  }
}

然后在你的模板中:

<div *ngFor="let property of response | appProperties">
    <div *ngFor="let item of response[property]">
         {{item.something}}
    </div>
</div>

Answer 4

    <div *ngFor="let item of donation_list | keyvalue">
        <div class="donation-box">
             <Label class="donation-label">Date : {{item.value.PaymentDate}}</Label>
             <Label class="donation-label">Time : {{item.value.PaymentTime}}</Label>

        </div>
   </div>

如果对象内部有更多属性，则可以这样使用。

Answer 5

解决方案

\n\n

在完美的世界中，您会得到一系列对象，因为世界并不总是完美的。您想要做的是将所有这些对象存储在一个数组中。这是一个用简单的旧式 JavaScript 编写的过于简化的解决方案。

\n\n

步骤1.获取所有对象键。使用 Object.keys。此方法返回给定对象\xe2\x80\x99s 自己的可枚举属性的数组。

\n\n

步骤 2.创建一个空数组。这是所有属性都将存在的地方，因为您的新 ngFor 循环将指向该数组，所以我们必须捕获所有属性。

\n\n

步骤 3.迭代抛出所有键，并将每个键推入您创建的数组中。

\n\n

Here\xe2\x80\x99 是代码中的样子。

\n\n

// Evil response in a variable. Here are all my vehicles.\nlet evilResponse = { \n  "car" : \n    { \n       "color" : "red",\n       "model" : "2013"\n    },\n   "motorcycle": \n    { \n       "color" : "red",\n       "model" : "2016"\n    },\n   "bicycle": \n    { \n       "color" : "red",\n       "model" : "2011"\n    }\n}\n// Step 1. Get all the object keys.\nlet evilResponseProps = Object.keys(evilResponse);\n// Step 2. Create an empty array.\nlet goodResponse = [];\n// Step 3. Iterate throw all keys.\nfor (prop of evilResponseProps) { \n    goodResponse.push(evilResponseProps[prop]);\n}\n

\n\n

然后，您可以将 goodResponse 分配给您首先尝试迭代的类属性。

\n\n

那\xe2\x80\x99都是大家。

\n