Angular 2 更新 : no gui update after async data input

Question

目前我正在使用 Angular2-Beta1，

但是来自“*ngFor”的模板将不起作用并且仅显示为 <!--template bindings={}-->而不是作为 <template ...></template>如此处所述angular2 on git - doc

问题还在于我在这里使用 electron 和 typescript，并且我正在将所有使用 webpack 的内容翻译成“es5”。

我之所以遇到这个问题，是因为异步数据输入抛出节点进程，它们不想显示在 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);
            });
        });
    }