ngFor над объектом, заселенным от обещания в Angular 2

Question

Я разбираю zip-файл с изображениями, которые я хочу ссылаться на blobURL в объекте filesFromZip, и прокручиваю его с помощью ngFor, чтобы показать изображения на странице.

Похоже, что этот

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) 
     }; 
    }); 
    } 
    }); 

в шаблоне:

<md-card *ngFor="let file of filesFromZip"> 
    <h3 md-line>{{file.fileName}}</h3> 
    <img src="{{file.blobURL}}"> 
</md-card> 

Как я могу получить данные с обетования filesFromZip?

Я пытался просто столкнуть ее в filesFromZip, но это дает мне эту ошибку:

error_handler.js:47 EXCEPTION: Uncaught (in promise): TypeError: Cannot read property 'async' of null

Я действительно борется с асинхронности и угловыми 2. Кто-то, кто может послать меня в правильном направлении?

Answer 1

Во-первых, вы не можете перебирать простой объект с помощью директивы *ngFor, поэтому filesFromZip должен быть массивом.

this.filesFromZip = []; 
zip.loadAsync(zipfileFromInput) 
    .then((zip)=> { 
    for (let file in zip.files) { 
     let fileInZip = zip.files[file]; 
     zip.file(fileInZip.name) 
     .async("arraybuffer") 
     .then((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.... 
      this.filesFromZip.push({ 
      fileName: fileInZip.name, 
      blobURL: URL.createObjectURL(blob) 
      }); 
     }); 
    } 
    }); 

или вы можете использовать Promise.all(), который будет создавать обещание от итератора обетованную, а затем использовать асинхронную трубу:

JavaScript:

this.filesFromZip = Promise.all(
    zip.loadAsync(zipfileFromInput) 
    .then((zip)=> { 
     let out=[]; 
     for (let file in zip.files) { 
     let fileInZip = zip.files[file]; 
     out.push(zip.file(fileInZip.name) 
      .async("arraybuffer") 
      .then((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.... 
      this.filesFromZip.push({ 
       fileName: fileInZip.name, 
       blobURL: URL.createObjectURL(blob) 
      }); 
     })); 
    } 
    return out; 
    }); 
) 

шаблона :

<md-card *ngFor="let file of filesFromZip|async"> 
    <h3 md-line>{{file.fileName}}</h3> 
    <img src="{{file.blobURL}}"> 
</md-card> 

Тем не менее, ваша главная проблема здесь в том, что zip.file(fileInZip.name) не возвращается null