*ngFor 在 Angular 2 上对我不起作用答案

【问题标题】：*ngFor doesn't work for me on Angular 2*ngFor 在 Angular 2 上对我不起作用
【发布时间】：2017-08-18 23:31:48
【问题描述】：

我是 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>

【问题讨论】：

忘记<tr *ngFor="#v of fevVidoes">，它仅在 2.0.0-beta.x 及更早版本中有效。
请查看 angular.io 上的文档。正如@echonax 在对我的回答import {Component} from 'angular2/core'; 的评论中提到的那样，在发布的角度版本（超过一年前）中也无效。

标签： angular webstorm ngfor

【解决方案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 = [

【讨论】：

Günter，如果您检查导入 import {Component} from 'angular2/core';，它们是测试版导入。我认为的版本存在混淆:-)