*ngFor doesn't work for me on Angular 2

Question

I'm new with Angular. I'm trying to make a table with information on videos. I'm working with Angular 2 using WebStorm IDE.

When I load the project, it just write "Loading...".

The problem with the code is with the *ngFor, because if I take it down, I see an empty table (at least I see something).

I wrote the *ngfor like this:

<tr *ngFor="let v of fevVidoes">

As I understand, this is the new format, for ngfor.

but if I write:

<tr *ngFor="#v of fevVidoes">

I get an error from WebStorm about the format ("statement unexpected"), BUT when I load the project, it doesn't show me "Loading...", it just show me an empty table.

I downloaded and installed Angular yesterday, and I have all the latest versions.

This is my 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} from 'angular2/core';


@Component({
    selector: 'playlist',
    templateUrl: 'app/ts/playlist.component.html',
    inputs: ['fevVideos']

})

export class PlaylistComponent{}

app.component.ts

import {Component} from 'angular2/core';
import {Config} from './config.service';
import {Video} from './video';
import {PlaylistComponent} from './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 With Me (Pinkpop)", "SVQz6xGCTKM", "OneRepublic LIVE SHOW - Apologize  Stay With 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>

Answer 1

@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 a typo

this.fevVidoes = [

should be

this.fevVideos = [