angolare 2 Aggiornamento: nessun aggiornamento gui dopo l'immissione di dati asincroni

Question

Attualmente sto lavorando con Angular2-Beta1,

ma il template dal "* ngFor" non funziona e viene mostrato solo come <!--template bindings={}--> e non come <template ...></template> come è descritto qui angular2 on git - doc

Il problema è anche che io lavoro qui con elettroni e dattiloscritto e che sto traducendo il tutto con webpack a "ES5".

Ho avuto il problema perché l'input dei dati asincroni generava il processo del nodo e non vogliono essere visualizzati sulla GUI, ma posso vederli nella console.

mio dattiloscritto-file corrente con il problema

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

Prova questo costruttore ... funziona per me:

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