以angular2显示对象[重复]

Posted 2023-03-13

【中文标题】以angular2显示对象[重复]

【英文标题】：Displaying an object in angular2 [duplicate]

【发布时间】：2017-04-20 01:41:23

【问题描述】：

好的，我有这个

 "calledCust":  "no": 270, "yes": 9 , "hasOpened":  "no": 254, "yes": 25  

我一直在尝试将其显示在视图中。

<ul *ngFor="let profile of profiles.counts">
  <li>
    profile | json
  </li>
</ul>

因为它不是一个 json 数组，所以 angular 会爆炸

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

我真的很想将结果显示如下。

叫客户是：9 已打开 YES:25

非常感谢

编辑

这是完整的 json

    total_rows: 279,
    bookmark: "g2wAAAABaANkAB5kYmNvcmVAZGI0LnBvcnRlci5jbG91ZGFudC5uZXRsAAAAAmEAYj____9qaAJGQAnZi4AAAABiAAAB7mo",
    rows: [],
    counts: 
        calledCust: 
            no: 270,
            yes: 9
        ,
        hasOpened: 
            no: 254,
            yes: 25
        
    

【问题讨论】：

对象内部的counts prop 是什么？

@PankajParkar 我已经编辑了这个问题，谢谢:)

【参考方案1】：

您只需要将其转换为 JSON 数组，例如：

let key; // var key for old javascript ES5
let arr = [];

key = 'calledCust';
arr[0] = obj[key];
arr[0].key = key;

key = 'hasOpened';
arr[1] = obj[key];
arr[1].key = key;

创建一个管道来获取您的对象并将其转换为 JSON 数组很容易，然后您就可以这样做：

<ul *ngFor="let profile of profiles.counts | convertObjToJsonArray">

您可以迭代对象的属性以使该解决方案更通用。