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

i1icjdpr  于 2022-12-17  发布在  Java
关注(0)|答案(9)|浏览(164)

这是关于我在工作中发现的一个有趣的问题。
如果你还不知道的话。我说的是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.

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

dphi5xsq

dphi5xsq1#

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

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

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

5ktev3wc

5ktev3wc2#

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

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

在控制器中:

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

这是一个相当常见的情况,我不明白为什么没有一个标准的实现,如在Angular.js1.x中

x33g5p2x

x33g5p2x3#

更好的解决方案是使用如下管道:

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>
91zkwejq

91zkwejq4#

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

如果对象中有更多属性,可以像这样使用。

v2g6jxz6

v2g6jxz65#

使用Object.values从对象中获取一个常规数组。Object.keys看起来是很多不必要的工作。
参考:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Object/values

wbgh16ku

wbgh16ku6#

解决方案

在一个完美的世界里,你会得到一个对象数组,因为世界并不总是完美的。你要做的是,把所有的对象存储在一个数组里。这里是一个简单的解决方案,用普通的旧JavaScript。

**步骤1.**使用Object.keys获取所有对象键。此方法返回给定对象自己的可枚举属性的数组。
**第二步。**创建一个空数组。这是所有属性所在的地方,因为你的新ngFor循环将指向这个数组,我们必须捕获所有属性。
**第3步。**迭代抛出所有键,并将每个键推入您创建的数组中。

这是代码的样子。

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

然后,您可以将goodResponse赋给您最初试图迭代的class属性。
就这些了。

dced5bon

dced5bon7#

将数组声明为any,然后将对象

data=[] as any;
myObj={};

data=myObj;

现在循环通过数据数组

<tr *ngFor="let item of data">
<td>{{item.property}}</td>
</tr>
dgiusagp

dgiusagp8#

有两种方法:
1.如果对象项没有键

{ name: 'John', age: 18,... }

<div *ngFor="let item of myObj | keyvalue">
    Key: <strong>{{item.key}}</strong> and Value: <span>{{item.value}}</span>
</div>

1.如果您的对象项具有键

管道

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

type Args = "keyvalue" | "value" | "key";

@Pipe({
    name: "pipeMapToIterable",
    pure: false
})
export class MapToIterablePipe implements PipeTransform {
    transform(obj: {}, arg: Args = "keyvalue") {
        return arg === "keyvalue" ?
            Object.keys(obj).map(key => ({ key: key, value: obj[key] })) :
            arg === "key" ?
                Object.keys(obj) :
                arg === "value" ?
                    Object.keys(obj).map(key => obj[key]) :
                    null;
    }
}

超文本标记语言

{ 
    John: { name: 'John', age: 18 },
    Bob: { name: 'Bob', age: 25},
    Marry: { name: 'Marry', age: 22}
}

<!-- default -->
<div *ngFor="let item of myObj | pipeMapToIterable">
    Key: <strong>{{item.key}}</strong> and Value: <span>{{item.value}</span>
</div>

<!-- keyvalue -->
<div *ngFor="let item of myObj | pipeMapToIterable : 'keyvalue'">
    Key: <strong>{{item.key}}</strong> and Value: <span>{{item.value}</span>
</div>

<!-- value -->
<div *ngFor="let item of myObj | pipeMapToIterable : 'value'">
    Key: <strong>{{item.key}}</strong> and Value: <span>{{item.value}</span>
</div>

<!-- key -->
<div *ngFor="let item of myObj | pipeMapToIterable : 'key'">
    Key: <strong>{{item.key}}</strong> and Value: <span>{{item.value}</span>
</div>
1bqhqjot

1bqhqjot9#

你可以试试这个:

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

欲了解更多信息,请访问:https://angular.io/api/common/KeyValuePipe

相关问题