角度2更新：非同期データ入力

Question

後の無GUIの更新現在、私は、Angular2-β1で働いている

が、「* ngFor」は動作しませんとだけ <!--template bindings={}--> とないものとして示されているからテンプレート <template ...></template> としてそれがここangular2 on git - doc

に記載されているような問題は、私は電子とtypescriptですと、私は「ES5」にWebPACKの持つすべてのものを翻訳していますことをここで働いていることもあります。

async-data-inputがnode-processをスローするために問題が発生しましたが、GUIに表示したくないのですが、コンソールで見ることができます。

問題と私の現在のtypescriptですファイル

import {Component, View, NgZone} from 'angular2/core'; 
import {NgFor} from 'angular2/common'; 
import {MATERIAL_DIRECTIVES} from 'ng2-material/all'; 
const electron = require('electron'); 
const ipc = electron.ipcRenderer; 

interface Result { 
    videoId: string; 
    title: string; 
    thumbnail: string; 
    channel: string; 
} 

@Component({ 
    selector: 'resultlist' 
}) 
@View({ 
    directives: [MATERIAL_DIRECTIVES, NgFor], 
    template: ` 
<div 
    style="height: 250px;"> 
    <md-list> 
    <md-list-item class="md-2-line" *ngFor="#result of resultlistcontent; #i = index"> 
     <img [src]="result.thumbnail" class="md-avatar" alt="{{result.videoId}}"/> 
     <div class="md-list-item-text" layout="column"> 
     <h3> {{ result.title }} </h3> 
     <p> {{ result.channel }} 
     </div> 
    </md-list-item> 
    </md-list> 
</div> 
    ` 
}) 

export class Resultlist { 

    private resultlistcontent = RESULTLIST; 
    private _ngZone:NgZone; 

    constructor(zone:NgZone) { 
    this._ngZone = zone; 
    this._ngZone.run(() => { 
     ipc.on('search-result', function (event, arg) { 
     this.resultlistcontent = []; 
     for (var i = 0; i < arg.pageInfo.resultsPerPage; i ++) { 
     var tmpid = arg.items[i].id; 
     var tmpsnip = arg.items[i].snippet; 
     this.resultlistcontent.push({ videoId: tmpid.videoId, 
          title: tmpsnip.title, 
          thumbnail: tmpsnip.thumbnails.default.url, 
          channel: tmpsnip.channelTitle}); 
     } 
     console.log(this.resultlistcontent); 
     }) 
    }) 
    } 
} 

var RESULTLIST: Result[] = [{videoId: '', title: 'Resultlist...', thumbnail: '', channel: 'test'}, 
    {videoId: "ZTVNgzvxoV0", title: "The Best Of Vocal Deep House Chill Out Music 2015", thumbnail: "https://i.ytimg.com/vi/ZTVNgzvxoV0/default.jpg", channel: 'test'}]; 

Answer 1

このコンストラクタを試してみてください...私の作品：

constructor(zone: NgZone) { 
     this._ngZone = zone; 
     ipc.on('search-result', function (event, arg) { 
      this._ngZone.run(() => { 
       this.resultlistcontent = []; 
       for (var i = 0; i < arg.pageInfo.resultsPerPage; i++) { 
        var tmpid = arg.items[i].id; 
        var tmpsnip = arg.items[i].snippet; 
        this.resultlistcontent.push({ 
         videoId: tmpid.videoId, 
         title: tmpsnip.title, 
         thumbnail: tmpsnip.thumbnails.default.url, 
         channel: tmpsnip.channelTitle 
        }); 
       } 
       console.log(this.resultlistcontent); 
      }); 
     }); 
    }