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));
    }
}

Answer 1

从组件定义中删除输入并在类中添加输入属性。

import {Input} from '@angular/core';
export class PlaylistComponent{
    @Input() public videos: Array<Video>;
    onSelect(vid:Video){
        console.log(JSON.stringify(vid));
    }
}

ngFor不工作角度2并显示空白页面

1 个答案: