Question

目前我正在使用Angular2-Beta1，

但来自＆＃34; * ngFor＆＃34;的模板不起作用，只显示为  而不是 <template ...></template> 正如这里所描述的那样angular2 on git - doc

问题还在于我在这里使用电子和打字稿工作，并且我用webpack将所有内容翻译成＆＃34; es5＆＃34;。

我遇到了这个问题，因为async-data-input抛出了node-process，他们不想在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'}];

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

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

1 个答案: