angularjs - ngFor が angular 2 で動作せず、空白のページが表示される

Question

私はYouTubeのビデオを見て、このリンクのビデオとまったく同じようにしようとしましたhttps://www.youtube.com/watch?v=bKWDKmHvF78&index=8&list=PL6gx4Cwl9DGBYxWxJtLi8c6PGjNKGYGZZしかし、ngForはまったく機能しません。ngFor で書くと、空白のページが表示されます。

//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 {
    name="check";
    videos:Array<Video>;
    constructor(){
        this.videos=[
            new Video(1,"row1","check1","this is our first row"),
            new Video(1,"row2","check2","this is our second row"),
        ]
    }
}

//app.component.html

<h1>{{name}}</h1>
<playlist [videos]="videos"></playlist>

//main.ts

import {bootstrap}    from 'angular2/platform/browser';
import {AppComponent} from './app.component';

bootstrap(AppComponent);

//playlist.component.html

<table class="table table-hover">
    <thead>
    <tr>
        <td>ID</td>
        <td>Title</td>
        <td>Description</td>
    </tr>
    </thead>
    <tbody>
        <tr  *ngFor="let v of videos">
            <td>{{v.id}}</td>
            <td>{{v.title}}</td>
            <td>{{v.desc}}</td>

        </tr>
</tbody>

</table>

//playlist.component.ts

/**
 * Created by Adir on 9/7/2016.
 */
import {Component} from 'angular2/core';
import {Video} from './Video';

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

export class PlaylistComponent{
    onSelect(vid:Video){
        console.log(JSON.stringify(vid));
    }
}