Angular 2 更新：异步数据输入后没有 gui 更新答案

【问题标题】：Angular 2 Update: no gui update after async data inputAngular 2 更新：异步数据输入后没有 gui 更新
【发布时间】：2016-04-16 09:05:42
【问题描述】：

目前我正在使用 Angular2-Beta1，

但来自“*ngFor”的模板将不起作用，仅显示为  而不是作为 <template ...></template> 正如这里所描述的angular2 on git - doc

问题还在于我在这里使用电子和打字稿，并且我正在使用 webpack 将所有内容翻译为“es5”。

我遇到了问题，因为 async-data-input 抛出了节点进程，它们不想显示在 GUI 上，但我可以在控制台中看到它们。

我当前的打字稿文件有问题

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'}];

【问题讨论】：

它是否可以处理来自RESULT_LIST 的数据，而无需构造函数中的代码？
嗨，是的，“结果列表”中的数据显示在 gui 上
那么它显然与模板标签无关，只是为了改变检测。我自己对此还不够了解，但无法提供帮助。您可以通过相应地更改问题的标题来增加获得帮助的机会。
感谢 Günther Zöchbauer：问题在于 gui 中绑定数据的更新。解决方案是：创建一个从 ipc-service 获取数据的服务。然后通过使用发射器将组件订阅到服务，它从 NgZone 中的服务获取数据（用于异步数据）。
我也遇到了类似的问题，我用ngOnInit方法解决了angular.io/docs/ts/latest/api/core/OnInit-interface.html

标签： angular typescript

【解决方案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);
            });
        });
    }

【讨论】：