title: Angular 6 nested array use in ngfor
body: <p>I have below nested array
  <a href="https://i.stack.imgur.com/uH3oU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uH3oU.png" alt="enter image description here"></a></p>
  
  <p>I this picture I have array of key and data</p>
  
  <p>Now second picture shows the structure of data </p>
  
  <p><a href="https://i.stack.imgur.com/23lLp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/23lLp.png" alt="enter image description here"></a></p>
  
  <p>I am trying to bind this using ngfor nested</p>
  
  <pre><code>*ngFor="let item of groupByOrgData"
  *ngFor="let cof of item.data
   {{cof.element.checklistAssociatedTo}}
  </code></pre>
  
  <p>Below is the code I am using to generate the array</p>
  
  <pre><code> this.groupByOwn = [];
        res.forEach(item =&gt; {
          this.groupByOwn.push({ id: item.id, element: item, groupBy: item.orgId + '_' + item.orgName });
  
        });
        this.groupByOrg = _.groupBy(this.groupByOwn, function (n) {
          return n.groupBy
        });
        let props = Object.keys(this.groupByOrg);
        this.groupByOrgData = [];
        for (var prop of props) {
          this.groupByOrgData.push({ key: prop, data: this.groupByOrg[prop] });
        }
  </code></pre>
  
  <p>But its not working</p>
  
  <p>Please help</p>