* ngFor对Angular 2不起作用

Question

我是Angular的新手。我正在尝试制作一个包含视频信息的表格。 我正在使用WebStorm IDE与Angular 2合作。

当我加载项目时，它只写“正在加载......”。

代码的问题在于*ngFor，因为如果我把它拿下来，我会看到一张空表（至少我看到了什么）。

我写了这样的*ngfor：

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

据我了解，这是ngfor的新格式。

但如果我写：

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

我从WebStorm收到有关格式的错误（“语句意外”），但是当我加载项目时，它没有显示“正在加载...”，它只显示一个空表。

我昨天下载并安装了Angular，并且我拥有所有最新版本。

这是我的源代码：

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{}

应该是

@Component({
    selector: 'playlist',
    templateUrl: 'app/ts/playlist.component.html',
})
export class PlaylistComponent{
  @Input() fevVideos;
}

此行有拼写错误

this.fevVidoes = [

应该是

this.fevVideos = [