如何使用多个ngFor解析angular2中的json文件?

时间:2016-02-10 11:59:16

标签: angularjs json nested rendering angular

我正在尝试解析以下json文件.Json文件已成功读取。 但我想渲染这个json文件中的所有数据。我使用嵌套的ngFor来做这个。但是我遇到了这个错误:

EXCEPTION: Cannot find a differ supporting object '[object Object]' in [comp in ParserComponent@2:13]

我也包含了ngFor指令。 我想以递归方式访问所有数据。 有没有办法做到这一点? 提前致谢

1. Json文件

[{
    "_id": "5694f0aab4d9a8e41f399491",
    "name": "page10",
    "pageType": "Header",
    "wsId": "567159bc1d10306c25b5b3f6",
    "desc": "pg10",
    "createdDate": "2016-01-12T12:25:14.801Z",
    "__v": 0,
    "pageObj": {
        "entity": "monthEndSummary",
        "pageType": "pages",
        "editMode": true,
        "pageLayout": "DEFAULT_LAYOUT",
        "pageName": "page10",
        "pageRows": [
            {
                "sections": [
                    {
                        "sectionRows": [
                            {
                                "secRowColumns": [
                                    {
                                        "currentIndexInSectionRow": 0,
                                        "isDynamic": true,
                                        "cmpViewType": "Regular",
                                        "uiLibrary": "LIB",
                                        "uiCategory": "headers",
                                        "uiComponent": "HEADING",
                                        "mappings": [
                                            {
                                                "mapAttr": "src1"
                                            },
                                            {
                                                "mapAttr": "src2"
                                            },
                                            {
                                                "mapAttr": "src3"
                                            },
                                            {
                                                "mapAttr": "customerName"
                                            },
                                            {
                                                "mapAttr": "cardAccNo"
                                            }
                                        ],
                                        "data": {
                                            "cardAccNo": "Card Account No",
                                            "customerName": "Customer Name",
                                            "src3": "http://localhost:3202/uploads/p3.png",
                                            "src2": "http://localhost:3202/uploads/p2.png",
                                            "src1": "http://localhost:3202/uploads/p1.png"
                                        }
                                    }
                                ]
                            },
                            {
                                "secRowColumns": [
                                    {
                                        "currentIndexInSectionRow": 0,
                                        "isDynamic": true,
                                        "uiLibrary": "LIB",
                                        "uiCategory": "info-blocks",
                                        "uiComponent": "DYNAMIC-BODY-1",
                                        "mappings": [
                                            {
                                                "mapAttr": "statementDate"
                                            },
                                            {
                                                "mapAttr": "minAmtDue"
                                            },
                                            {
                                                "mapAttr": "totalAmtDue"
                                            },
                                            {
                                                "mapAttr": "stmtSummary"
                                            },
                                            {
                                                "mapAttr": "creditSummary"
                                            },
                                            {
                                                "mapAttr": "rewards"
                                            },
                                            {
                                                "mapAttr": "bottomPara"
                                            },
                                            {
                                                "mapAttr": "prevBalance"
                                            },
                                            {
                                                "mapAttr": "purchases"
                                            },
                                            {
                                                "mapAttr": "cashAdv"
                                            },
                                            {
                                                "mapAttr": "payments"
                                            },
                                            {
                                                "mapAttr": "creditLimit"
                                            },
                                            {
                                                "mapAttr": "creditAvail"
                                            },
                                            {
                                                "mapAttr": "pointsEarned"
                                            },
                                            {
                                                "mapAttr": "payback"
                                            },
                                            {
                                                "mapAttr": "dueDate"
                                            },
                                            {
                                                "mapAttr": "Amt"
                                            },
                                            {
                                                "mapAttr": "interest"
                                            }
                                        ],
                                        "data": {
                                            "interest": "Interest will be levied if Total Amount Due is not paid",
                                            "Amt": "Rs.",
                                            "dueDate": "Due Date:",
                                            "payback": "Points Transferred to PAYBACK(Acc:",
                                            "pointsEarned": "Points Earned",
                                            "creditAvail": "Available Credit",
                                            "creditLimit": "Credit Limit",
                                            "payments": "Payments/ Credits",
                                            "cashAdv": "Cash Advances",
                                            "purchases": "Purchases/ Charges",
                                            "prevBalance": "Previous Balance", 
                                            "minAmtDue": "Minimum Amount Due",
                                            "statementDate": "Statement Date"
                                        }
                                    }
                                ]
                            },
                            {
                                "secRowColumns": [
                                    {
                                        "currentIndexInSectionRow": 0,
                                        "isDynamic": true,
                                        "uiLibrary": "IECP-LIB",
                                        "uiCategory": "info-blocks",
                                        "uiComponent": "DYNAMIC-BODY-2",
                                        "mappings": [
                                            {
                                                "mapAttr": "topHeading"
                                            },
                                            {
                                                "mapAttr": "cardNo"
                                            },
                                            {
                                                "mapAttr": "date"
                                            },
                                            {
                                                "mapAttr": "refNo"
                                            },
                                            {
                                                "mapAttr": "transactionDetails"
                                            },
                                            {
                                                "mapAttr": "rewardPt"
                                            },
                                            {
                                                "mapAttr": "currency"
                                            },
                                            {
                                                "mapAttr": "intAmt"
                                            },
                                            {
                                                "mapAttr": "amt"
                                            }
                                        ],
                                        "data": {
                                            "amt": "Amount(in)",
                                            "intAmt": "International Amount",
                                            "currency": "Currency",
                                            "rewardPt": "Reward Points",
                                            "transactionDetails": "Transaction Details",
                                            "refNo": "Ref. Number",
                                            "date": "Date",
                                            "cardNo": "Card Number:",
                                            "topHeading": "TRANSACTION DETAILS"
                                        }
                                    }
                                ]
                            },
                            {
                                "secRowColumns": [
                                    {
                                        "currentIndexInSectionRow": 0,
                                        "isDynamic": true,
                                        "uiLibrary": "LIB",
                                        "uiCategory": "Images",
                                        "uiComponent": "IMAGE",
                                        "mappings": [
                                            {
                                                "mapAttr": "heading"
                                            },
                                            {
                                                "mapAttr": "src"
                                            }
                                        ],
                                        "data": {
                                            "src": "http://localhost:3202/uploads/p4.png",
                                            "heading": "Great offers on your card"
                                        }
                                    }
                                ]
                            },                           
                            {
                                "secRowColumns": [
                                    {
                                        "currentIndexInSectionRow": 0,
                                        "isDynamic": true,
                                        "uiLibrary": "LIB",
                                        "uiCategory": "Body",
                                        "uiComponent": "STATIC-BODY-2",
                                        "mappings": [
                                            {
                                                "mapAttr": "heading"
                                            },
                                            {
                                                "mapAttr": "point1"
                                            },
                                            {
                                                "mapAttr": "point2"
                                            },
                                            {
                                                "mapAttr": "point3"
                                            },
                                            {
                                                "mapAttr": "point4"
                                            },
                                            {
                                                "mapAttr": "point5"
                                            },
                                            {
                                                "mapAttr": "point6"
                                            },
                                            {
                                                "mapAttr": "point7"
                                            },
                                            {
                                                "mapAttr": "bottomText"
                                            },
                                            {
                                                "mapAttr": "src"
                                            },
                                            {
                                                "mapAttr": "signature"
                                            }
                                        ],
                                        "data": {
                                            "signature": "Authorised Signatory",
                                            "src": "http://localhost:3202/uploads/p9.png",
                                            "bottomText": "For ",
                                            "point7": "For payments made through cheque, we request you to make the paymentatleast3workingdaysbeforetheduedateincaseofchequeand%workingdaysbeforethe."
                                        }
                                    }
                                ]
                            },
                            {
                                "secRowColumns": [
                                    {
                                        "currentIndexInSectionRow": 0,
                                        "isDynamic": true,
                                        "uiLibrary": "LIB",
                                        "uiCategory": "Footer",
                                        "uiComponent": "FOOTER",
                                        "mappings": [
                                            {
                                                "mapAttr": "topParaLine1"
                                            },
                                            {
                                                "mapAttr": "topParaLine2"
                                            },
                                            {
                                                "mapAttr": "bottomParaLine1"
                                            },
                                            {
                                                "mapAttr": "bottomParaLine2"
                                            }
                                        ],
                                        "data": {
                                           
                                        }
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    },
    "updatedDate": "2016-01-18T05:30:09.558Z"
}
]

2.parser.component.ts

<div class="row">
<div *ngFor="#comp of record">
    {{comp.name}}
    <div *ngFor="#temp of comp.pageObj">
        {{temp.entity}}
        <div *ngFor="#pRow of temp.pageRows">
            <div *ngFor="#temp of comp.pageObj">
            </div>
        </div>
    </div>
</div>

1 个答案:

答案 0 :(得分:2)

我猜你使用observable来获取数据而不是接收数据。也许您可以使用async管道来解决您的问题。

@Component({
  (...)
  template: `
    <div class="row">
      <div *ngFor="#comp of record | async">
    (...)
  `
})
export class MyComp {
   constructor(http:Http) {
     this.record = http.get('http://...').map(res => res.json());
   }
}

修改

ngFor只能迭代数组而不是对象。它看到JSON中的pageObj属性是一个对象而不是数组......

您可以按照以下说明更新模板代码:

<div class="row">
  <div *ngFor="#comp of record">
    {{comp.name}}
    <div>
        {{comp.pageObj.entity}}
        <div *ngFor="#pRow of comp.pageObj.pageRows">
           (...)
        </div>
    </div>
  </div>
</div>