title: ngFor over object populated from promise in Angular 2
body: <p>I'm parsing a zip file with images that I want to reference with a blobURL in a <code>filesFromZip</code> object, and iterate over it with ngFor to show the images on the page.</p>
  
  <p>It looks like this</p>
  
  <pre><code>filesFromZip = {};
  let zip = new JSZip();
  
  zip.loadAsync(zipfileFromInput)
    .then(function (zip) {
      for (let file in zip.files) {
  
      let fileInZip = zip.files[file];
  
      zip.file(fileInZip.name)
        .async("arraybuffer")
        .then(function (content) {
          let buffer = new Uint8Array(content);
          let blob = new Blob([buffer.buffer]);
  
          // here is where I want to push this object into the filesFromZip object somehow....
          return {
            fileName: fileInZip.name,
            blobURL: URL.createObjectURL(blob)
          };
      });
     }
    });
  </code></pre>
  
  <p>in the template:</p>
  
  <pre><code>&lt;md-card *ngFor="let file of filesFromZip"&gt;
    &lt;h3 md-line&gt;{{file.fileName}}&lt;/h3&gt;
    &lt;img src="{{file.blobURL}}"&gt;
  &lt;/md-card&gt;
  </code></pre>
  
  <p>How can I get the data from the promise to <code>filesFromZip</code>?</p>
  
  <p>I've tried to just push it into <code>filesFromZip</code> but that gives me this error:</p>
  
  <blockquote>
    <p>error_handler.js:47 EXCEPTION: Uncaught (in promise): TypeError:
    Cannot read property 'async' of null</p>
  </blockquote>
  
  <p>I'm really struggling with asynchronicity and Angular 2. Somebody who can send me in the right direction?</p>