title: Use for loop and local array with each item in *ngFor
body: <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>//this.http.get("https://example.com/_api/web/lists/getbytitle('ImagingDocumentTypes')/items?$select=Title,Image,Source/Title,System/Title&amp;$orderBy=Title&amp;$expand=Source,System&amp;$filter=System/Title eq '" + this.item + "'").subscribe(data =&gt; {
  //this.doctypes = data['value'];
  
  //EXAMPLE OUTPUT IS: 
  this.doctypes = [{
    "Source": [{
      "Title": "Anchor (MN)"
    }, {
      "Title": "United Bancorp"
    }, {
      "Title": "Lafayette Savings Bank"
    }],
    "Title": "Commercial Loans",
  }, {
    "Source": [{
      "Title": "Anchor (WI)"
    }, {
      "Title": "United Bancorp"
    }, {
      "Title": "Old National"
    }],
    "Title": "Checks",
  }, {
    "Source": [{
      "Title": "Anchor (MN)"
    }, {
      "Title": "Anchor (WI)"
    }, {
      "Title": "Old National"
    }],
    "Title": "HR Documents",
  }]
  
  
  for (let i = 0; i &lt; this.doctypes.length; i++) {
    let sources = this.doctypes[i].Source;
    let sourcesarr = [];
    for (let i = 0; i &lt; sources.length; i++) {
      console.log(sources[i].Title)
      sourcesarr.push(sources[i].Title)
      console.log(sourcesarr)
    }
    sourcesarr.sort()
  }
  
  //})</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;script src="https://code.angularjs.org/tools/system.js"&gt;&lt;/script&gt;
   &lt;script src="https://code.angularjs.org/tools/typescript.js"&gt;&lt;/script&gt;
   &lt;script src="https://code.angularjs.org/2.0.0-alpha.39/angular2.dev.js"&gt;&lt;/script&gt;
  
  &lt;table&gt;
    &lt;tr&gt;
      &lt;th class="modalheader"&gt;Document Types&lt;/th&gt;
      &lt;th class="modalheader"&gt;Sources&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr *ngFor="let doctype of doctypes"&gt;
      &lt;td&gt;{{doctype.Title}}&lt;/td&gt;
      &lt;td&gt;
        &lt;!-- WANT EVERY SOURCE FOR EACH DOCTYPE HERE --&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have built a table for types of documents and their sources.</p>
  
  <p>Using <code>*ngFor</code>, I am looping through an object array named <code>this.doctypes</code> and want to get each <code>doctype</code>s sources. Using a common <code>for</code> loop, I can get each source that uses the document type and push it to a local array. I am clearing this array and pushing each source after iterating over each document type.</p>
  
  <p>However, I can't change <code>sourcesarr</code> to be a global variable (to be accessed by a second <code>*ngFor</code>) because it will end up storing the sources for only the last doctype iterated over.</p>
  
  <p>How can I solve this?</p>