Currently, I am working with Angular2-Beta1,
However, the templating from the "*ngFor" is not working properly and is only displayed as
<!--template bindings={}--><template ...></template>The issue arises because I am working with electron and typescript, and I am transpiling everything to "es5" using webpack.
I encountered this problem while dealing with async data input through the node process. The data was not displaying on the GUI but was visible in the console.
This is 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'}];