如何使用多个ngFor解析angular2中的json文件? [英] How to parse json file in angular2 using multiple ngFor?
本文介绍了如何使用多个ngFor解析angular2中的json文件?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试解析以下json文件.Json文件已成功读取. 但是我想呈现此json文件中的所有数据.因此我使用嵌套的ngFor来做到这一点.但是我遇到了这个错误:
I am trying to parse following json file.Json File is getting read successfully. but I want to render all the data inside this json file.thus I was using nested ngFor to do this.but I am facing this error:
EXCEPTION: Cannot find a differ supporting object '[object Object]' in [comp in ParserComponent@2:13]
我也包含了ngFor指令. 我想递归访问所有数据. 有什么办法吗? 预先感谢
I have included ngFor directive in too. I want to access all the data recursively. is there any way to do this? Thanks in advance
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>
推荐答案
我猜您使用的是用于获取数据的Observable而不是接收到的数据.也许您可以使用async管道来解决问题.
I guess that you use the observable used to get data instead of the received data. Perhaps you could use the async pipe to fix your problem.
@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属性是一个对象，而不是数组...
ngFor can only iterate over arrays not objects. It see that the pageObj attribute in your JSON is an object not an array...
您可以按照以下说明更新模板代码:
You could update your template code as described below:
<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>
这篇关于如何使用多个ngFor解析angular2中的json文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
