Angular 2：ngFor嵌套问题

Question

我收到ngFor嵌套问题，它显示“无法读取未定义的属性'Field'”。

我尝试引荐其他问题，但无法解决。 请帮助我如何正确呈现数据

 // service call this.xmldataService.getReport().subscribe( (report) => { this.group = report.CrystalReport.Group; }); // Error ERROR TypeError: Cannot read property 'Field' of undefined at Object.eval [as updateDirectives] (AppComponent.html:23) at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:12641) at checkAndUpdateView (core.es5.js:12053) at callViewAction (core.es5.js:12367) at execEmbeddedViewsAction (core.es5.js:12339) at checkAndUpdateView (core.es5.js:12054) at callViewAction (core.es5.js:12367) at execComponentViewsAction (core.es5.js:12313) at checkAndUpdateView (core.es5.js:12059) at callWithDebugContext (core.es5.js:13041) 

 <table class="table table-bordered" *ngFor="let head of group; let i = index"> <thead> <tr> <th *ngFor="let d of head.GroupHeader.Section.Text; let i = index">{{d.TextValue}}</th> </tr> </thead> <tbody> <tr> <td *ngFor="let d of head.Details.Section.Field; let i = index">{{d.value}}</td> </tr> </tbody> </table> 

下面是我得到错误的json

 { "@Level": "2", "Section": { "@SectionNumber": "0", "Field": [{ "@Name": "GroupNameTEAMNO1", "@FieldName": "GroupName ({PDA112P.TEAM_NO})", "FormattedValue": "DL04", "Value": "DL04" }, { "@Name": "ASMPROCNO1", "@FieldName": "{PDA112P.ASM_PROC_NO}", "FormattedValue": "3H878", "Value": "3H878" }, { "@Name": "UNITNO1", "@FieldName": "{PDA112P.UNIT_NO}", "FormattedValue": "H83937", "Value": "H83937" }, { "@Name": "APPROVEDDATE1", "@FieldName": "{PDA112P.APPROVED_DATE}", "FormattedValue": null, "Value": null }, { "@Name": "REJECTEDDATE1", "@FieldName": "{PDA112P.REJECTED_DATE}", "FormattedValue": null, "Value": null }, { "@Name": "MAINTDATE1", "@FieldName": "{PDA112P.MAINT_DATE}", "FormattedValue": "04/20/2017", "Value": "04/20/2017" }, { "@Name": "RESNFORCHANGE1", "@FieldName": "{PDA112P.RESN_FOR_CHANGE}", "FormattedValue": "CHANGED GET TO GRASP IN WORKING POINT DETAIL NO PCF REQUIRED", "Value": "CHANGED GET TO GRASP IN WORKING POINT DETAIL NO PCF REQUIRED" }, { "@Name": "ISSUEDDATE1", "@FieldName": "{PDA112P.ISSUED_DATE}", "FormattedValue": null, "Value": null }] } } 

以下是组标签的输出

 {"@Level":"1","GroupHeader":{"Section":{"@SectionNumber":"0","Text":[{"@Name":"Text16","TextValue":"Team"},{"@Name":"Text17","TextValue":"Process"},{"@Name":"Text18","TextValue":"Unit"},{"@Name":"Text19","TextValue":"Maint.\\n\\nDate"},{"@Name":"Text21","TextValue":"Unit Rank /\\n\\nQuality Issues"},{"@Name":"Text20","TextValue":"Description of Change"},{"@Name":"Text22","TextValue":"Issued \\n\\nDate"},{"@Name":"Text24","TextValue":"Rejected\\n\\nDate"},{"@Name":"Text23","TextValue":"Approved\\n\\nDate"}]}},"Details":{"@Level":"2","Section":{"@SectionNumber":"0","Field":[{"@Name":"GroupNameTEAMNO1","@FieldName":"GroupName ({PDA112P.TEAM_NO})","FormattedValue":"DL04","Value":"DL04"},{"@Name":"ASMPROCNO1","@FieldName":"{PDA112P.ASM_PROC_NO}","FormattedValue":"3H878","Value":"3H878"},{"@Name":"UNITNO1","@FieldName":"{PDA112P.UNIT_NO}","FormattedValue":"H83937","Value":"H83937"},{"@Name":"APPROVEDDATE1","@FieldName":"{PDA112P.APPROVED_DATE}","FormattedValue":null,"Value":null},{"@Name":"REJECTEDDATE1","@FieldName":"{PDA112P.REJECTED_DATE}","FormattedValue":null,"Value":null},{"@Name":"MAINTDATE1","@FieldName":"{PDA112P.MAINT_DATE}","FormattedValue":"04/20/2017","Value":"04/20/2017"},{"@Name":"RESNFORCHANGE1","@FieldName":"{PDA112P.RESN_FOR_CHANGE}","FormattedValue":"CHANGED GET TO GRASP IN WORKING POINT DETAIL NO PCF REQUIRED","Value":"CHANGED GET TO GRASP IN WORKING POINT DETAIL NO PCF REQUIRED"},{"@Name":"ISSUEDDATE1","@FieldName":"{PDA112P.ISSUED_DATE}","FormattedValue":null,"Value":null}]}}} 

Answer 1

我认为问题在于，并非“组”集合中的所有项目都具有head.Details.Section字段。 我建议您记录所有项目以确保它们具有适当的字段。

Answer 2

您的“值”在模板中为小写，而在json中为大写：“值”

浏览完整个JSON之后，您还将在多个组上缺少'Section'属性。 看到这个遍历整个JSON并输出每个组的“ Section”的小提琴： https : //jsfiddle.net/j3eo4u7y/ （打开控制台并点击运行，查看日志）

j.CrystalReport.Group.map(g => g.Details).map(d => console.log(d.Section))