blocks|key|25405|text|解决方案|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|25406|在一个完美的世界里，你会得到一个对象数组，因为这个世界并不总是完美的。您要做的是将所有这些对象存储在一个数组中。这是一个简单的老式JavaScript解决方案。|25407|步骤1.获取所有对象键。使用Object.keys。此方法返回给定对象自己的可枚举属性的数组。|25408|步骤2.创建一个空数组。这是一个所有属性都将存在的地方，因为你的新ngFor循环将指向这个数组，我们必须将它们全部捕获。|25409|步骤3.迭代抛出所有键，并将每个键推入您创建的数组中。|25410|下面是它在代码中的样子。|25411|//+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]);
}|code-block|syntax|javascript|25412|然后，您可以将goodResponse分配给最初尝试迭代的类属性。|25413|这就是所有的人。|25414|entityMap^0|0|4|0|0|0|4|0|0|4|0|0|4|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|13|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|17|8|@$9|18|A|19|B|C]]|D|@]|E|$]]|$1|L|3|M|5|6|7|1A|8|@$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|N|3|O|5|6|7|1D|8|@]|D|@]|E|$]]|$1|P|3|Q|5|R|7|1E|8|@]|D|@]|E|$S|T]]|$1|U|3|V|5|6|7|1F|8|@]|D|@]|E|$]]|$1|W|3|X|5|6|7|1G|8|@]|D|@]|E|$]]|$1|Y|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]]|Z|$]]

<p><strong>The solution</strong></p>

<p>In a perfect world, you would get an array of objects, since the world is not always, perfect. What you want to do, is to store all those objects within an array. Here is an over-simplified solution in plain old JavaScript.</p>

<p><strong>Step 1.</strong> Get all the object keys. using Object.keys. This method returns an array of a given object’s own enumerable properties.</p>

<p><strong>Step 2.</strong> Create an empty array. This is an where all the properties are going to live, since your new ngFor loop is going to point to this array, we gotta catch them all.</p>

<p><strong>Step 3.</strong> Iterate throw all keys, and push each one into the array you created.</p>

<p>Here’s how that looks like in code.</p>

<pre><code>// 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]);
}
</code></pre>

<p>Then you can assign the goodResponse to the class property you were trying to iterare trough in the first place.</p>

<p>That’s all folks.</p>


blocks|key|2482703|text|更好的解决方案是使用这样的管道：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2482704|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);
++}
}|code-block|syntax|javascript|2482705|然后在您的模板中：|2482706|<div+*ngFor="let+property+of+response+%7C+appProperties">
++++<div+*ngFor="let+item+of+response[property]">
+++++++++{{item.something}}
++++</div>
</div>|2482707|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>A better solution would be to use a pipe such as this one:</p>

<pre><code>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);
  }
}
</code></pre>

<p>Then in your template:</p>

<pre><code>&lt;div *ngFor="let property of response | appProperties"&gt;
    &lt;div *ngFor="let item of response[property]"&gt;
         {{item.something}}
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>


blocks|key|25416|text|我不知道这是否安全，但对于这些简单的情况，我不喜欢管道解决方案，所以我通常使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|25417|<div+*ngFor="let+k+of+objectKeys(yourObject)">
++++{{yourObject[k].color}}
</div>|code-block|syntax|javascript|25418|在控制器中：|25419|objectKeys(obj)+{
++++return+Object.keys(obj);
}|25420|这是非常常见的情况，我不明白为什么在Angular.js+1.x中没有这样的标准实现|25421|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I don't know if this is safe, but for these simple cases i don't like the pipe solution, so i usually use:</p>

<pre><code>&lt;div *ngFor="let k of objectKeys(yourObject)"&gt;
    {{yourObject[k].color}}
&lt;/div&gt;
</code></pre>

<p>and in the controller:</p>

<pre><code>objectKeys(obj) {
    return Object.keys(obj);
}
</code></pre>

<p>This is a quite frequent case, i don't understand why there isn't a standard implementation for this like in Angular.js 1.x</p>


blocks|key|2693043|text|在Angular+6.1中引入了KeyValuePipe，它允许你迭代对象属性：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2693044|<div+*ngFor="let+item+of+object+%7C+keyvalue">
++{{item.key}}:{{item.value}}
</div>|code-block|syntax|javascript|2693045|文档：https://angular.io/api/common/KeyValuePipe|offset|length|2693046|entityMap|0|LINK|mutability|MUTABLE|url|https://angular.io/api/common/KeyValuePipe^0|0|0|3|16|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>In Angular 6.1 the KeyValuePipe was introduced which allows you to iterate object properties:</p>
<pre><code>&lt;div *ngFor=&quot;let item of object | keyvalue&quot;&gt;
  {{item.key}}:{{item.value}}
&lt;/div&gt;
</code></pre>
<p>Docs: <a href="https://angular.io/api/common/KeyValuePipe" rel="noreferrer">https://angular.io/api/common/KeyValuePipe</a></p>


blocks|key|26934|text|++++<div+*ngFor="let+item+of+donation_list+%7C+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>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|26935|如果你在对象中有更多的属性，你可以这样使用。|unstyled|26936|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

        &lt;/div&gt;
   &lt;/div&gt;
</code></pre>

<p>If you have more properties inside the object, you can use like this.</p>


blocks|key|2693054|text|使用Object.values从您的对象中获取一个常规数组。Object.keys似乎有很多不必要的工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2693055|参考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Object/values|offset|length|2693056|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Object/values^0|0|3|2M|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

<p>Use Object.values to get a regular array from your object. Object.keys seems like a lot of unnecessary work.</p>

<p>Reference:
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Object/values" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Object/values</a></p>


blocks|key|26942|text|您可以尝试这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|26943|<div+*ngFor="let+item+of+object+%7C+keyvalue">
++{{item.key}}:{{item.value}}
</div>|code-block|syntax|javascript|26944|有关更多信息，请访问：https://angular.io/api/common/KeyValuePipe|offset|length|26945|entityMap|0|LINK|mutability|MUTABLE|url|https://angular.io/api/common/KeyValuePipe^0|0|0|B|16|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>You can try this:</p>
<pre><code>&lt;div *ngFor=&quot;let item of object | keyvalue&quot;&gt;
  {{item.key}}:{{item.value}}
&lt;/div&gt;
</code></pre>
<p>For more info visit: <a href="https://angular.io/api/common/KeyValuePipe" rel="nofollow noreferrer">https://angular.io/api/common/KeyValuePipe</a></p>


<p>this is post is about an interesting problem I found at work.</p>

<p>If you don’t know it yet. I’m talking about Angular 2+</p>

<p><strong>The problem</strong></p>

<p>So you want to display the markup for a list, the values for this list come from the back end and for some reason instead of a good old array of objects you receive something like this.</p>

<pre><code>    { 
  "car" : 
    { 
       "color" : "red",
       "model" : "2013"
    },
   "motorcycle": 
    { 
       "color" : "red",
       "model" : "2016"
    },
   "bicycle": 
    { 
       "color" : "red",
       "model" : "2011"
    }
}
</code></pre>

<p>Then you try to use *ngFor but a wild error message appears:</p>

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

<p>You might fix it in the back end so you get an array of objects, but ain’t no body got time for that. Don’t you worry child, I’ve got us.</p>


How to loop over object properties with ngFor in Angular

对象存储

这篇文章是关于我在工作中发现的一个有趣的问题。如果你还不知道的话。我说的是Angular 2+The problem所以你想要显示一个列表的标记，这个列表的值来自后端，出于某种原因，你得到的不是一个很好的旧的对象数组，而是类似这样的东西。    {   "car" :     {        "color" : "r...

问如何在Angular中使用ngFor循环遍历对象属性
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Angular中使用ngFor循环遍历对象属性EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Angular中使用ngFor循环遍历对象属性
EN