我正在尝试解析以下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>
答案 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>