Angular 2 Update: no gui update after entering asynchronous input data

Question

I am currently working with Angular2-Beta1,

but the template from "* ngFor" will not work and only displays as <!--template bindings={}--> and not as <template ...></template> as described here angular2 on git - doc

The problem is also that I work here with electron and typescript and that I translated everything using webpack to "es5".

I got into a problem because the async-data input chose node-process and they don’t want to be displayed in the GUI, but I see them in the console.

My current typescript file with the problem

 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

Try this constructor ... works for 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); }); }); }