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

发布时间：2020-12-17 18:04:41 所属栏目：安全来源：网络整理

导读：目前我正在使用Angular2-Beta1, 但是来自“* ngFor”的模板不起作用,仅显示为！ - template bindings = {} - 而不是 template ... / template 正如这里描述的angular2 on git – doc 问题还在于我在这里使用电子和打字稿,并且我正在使用webpack将所有内容翻

目前我正在使用Angular2-Beta1,

但是来自“* ngFor”的模板不起作用,仅显示为
<！ - template bindings = {} - >
而不是
< template ...>< / template>
正如这里描述的angular2 on git – doc

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

我遇到了问题,因为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'}];

解决方法

试试这个构造函数……对我有用：

constructor(zone: NgZone) {
        this._ngZone = zone;
        ipc.on('search-result',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,channel: tmpsnip.channelTitle
                    });
                }
                console.log(this.resultlistcontent);
            });
        });
    }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!