为什么我的angular2组件数据没有显示在浏览器中？

Question

我正在尝试读取我的json file..its中的数据，并将其成功读取。但是，在打印表达式时，没有显示任何数据。以下是我的档案。

1.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"
}
]

​

Json文件正在被成功地读取，我能够显示数据直到record.name，但是在pageObject之后，我想递归地显示数据。因此，我使用了跟踪code.but，它没有在浏览器上显示任何内容。

2.parser.component.html

<div class="row">
    <div *ngFor="#comp of record">
    {{comp.name}}  
        <div *ngFor="#pRow of comp.pageObj.pageRows">        
            <div *ngFor="#sec of pRow.sec">
                <div *ngFor="#sRow of sec.sRow">
                    {{sRow.sCol.uiComponent}}
                </div>                           
            </div>                       
        </div>
   </div>
</div>

​

3.浏览器中的控制台输出

​

Answer 1

我认为你应该这样重构你的循环：

<div class="row">
  <div *ngFor="#comp of record">
    {{comp.name}}   //this works 
    <div *ngFor="#pRow of comp.pageObj.pageRows">        
      <div *ngFor="#sec of pRow.sections">
        <div *ngFor="#sRow of sec.sectionRows">
        <div *ngFor="#srColumn of sRow.secRowColumns">
          {{srColumn.uiComponent}}
        </div>                           
      </div>                       
    </div>
  </div>
</div>

下面是对应的plunkr：https://plnkr.co/edit/265zpJc4gZ55dZE8lGfN?p=preview。

实际上，您的结构中有很多子数组。我建议您使用工具将数据显示为树。有一些浏览器扩展是针对这个或这个在线的：http://jsonviewer.stack.hu/