title: Angular 2 : ngFor nesting issue
body: <p>I am getting ngFor nesting issue where it shows 'Cannot read property 'Field' of undefined'.</p>
  
  <p>I tried referring other questions but was not able to get it. please help how do i render data correctly</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// service call
  
  this.xmldataService.getReport().subscribe(
        (report) =&gt; {
          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)</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class="table table-bordered" *ngFor="let head of group; let i = index"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th *ngFor="let d of head.GroupHeader.Section.Text; let i = index"&gt;{{d.TextValue}}&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td *ngFor="let d of head.Details.Section.Field; let i = index"&gt;{{d.value}}&lt;/td&gt;
        &lt;/tr&gt;
  
      &lt;/tbody&gt;
    &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>below is my json for which i get error</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
   "@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
    }]
   }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>below is output for group tag</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{"@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}]}}}</code></pre>
  </div>
  </div>
  </p>