webstorm - *ngFor doesn't work for me on Angular 2 -
i'm new angular. i'm trying make table information on videos. i'm working angular 2 using webstorm ide.
when load project, write "loading...".
the problem code *ngfor
, because if take down, see empty table (at least see something).
i wrote *ngfor
this:
<tr *ngfor="let v of fevvidoes">
as understand, new format, ngfor
.
but if write:
<tr *ngfor="#v of fevvidoes">
i error webstorm format ("statement unexpected"), when load project, doesn't show me "loading...", show me empty table.
i downloaded , installed angular yesterday, , have latest versions.
this source code:
playlist.component.html
<table class="table table-hover"> <thead> <tr> <td>id</td> <td>type</td> <td>description</td> </tr> </thead> <tbody> <tr *ngfor="let v of fevvidoes"> <td>{{v.id}}</td> <td>{{v.title}}</td> <td>{{v.desc}}</td> </tr> </tbody> </table>
playlist.component.ts
import {component} 'angular2/core'; @component({ selector: 'playlist', templateurl: 'app/ts/playlist.component.html', inputs: ['fevvideos'] }) export class playlistcomponent{}
app.component.ts
import {component} 'angular2/core'; import {config} './config.service'; import {video} './video'; import {playlistcomponent} './playlist.component'; @component({ selector: 'my-app', templateurl: 'app/ts/app.component.html', directives: [playlistcomponent] }) export class appcomponent { mainheading = config.main_heading; fevvidoes:array<video>; constructor() { this.fevvidoes = [ new video(1, "macklemore & ryan lewis - thrift shop feat. wanz (official video)", "qk8mjjjvaes", "macklemore & ryan lewis - thrift shop feat. wanz (official video)"), new video(2, "onerepublic - apologize stay me (pinkpop)", "svqz6xgctkm", "onerepublic live show - apologize stay me (pinkpop)") ] } }
video.ts
export class video { id:number; title:string; videocode:string; desc:string; constructor(id:number,title:string,videocode:string,desc:string) { this.id = id; this.title = title; this.videocode = videocode; this.desc = desc; } }
app.component.html
<h1> {{ mainheading }} </h1> <playlist [fevvideos] = "fevvidoes"></playlist>
@component({ selector: 'playlist', templateurl: 'app/ts/playlist.component.html', inputs: ['fevvideos'] }) export class playlistcomponent{}
should be
@component({ selector: 'playlist', templateurl: 'app/ts/playlist.component.html', }) export class playlistcomponent{ @input() fevvideos; }
this line has typo
this.fevvidoes = [
should be
this.fevvideos = [
Comments
Post a Comment