ngFor не работает angular 2 и отображает пустую страницу

Я смотрел видео на YouTube и пытался сделать то же самое, что и видео по этой ссылке //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));
    }
}

angular angularjs ngfor
person Manspof    schedule 07.09.2016    source источник
comment
Вам нужно свойство с декоратором @Input (), чтобы иметь возможность передавать видео в качестве параметра.   -  person rook    schedule 07.09.2016
comment
У меня есть это '/ ** * Создано Adir 7.09.2016. * / import {Component} from 'angular2 / core'; импортировать {Video} из './Video'; @Component ({selector: 'playlist', templateUrl: 'app / ts / playlist.component.html', input: ['videos']}) класс экспорта PlaylistComponent {onSelect (vid: Video) {console.log (JSON. стринги (вид)); }} '   -  person Manspof    schedule 07.09.2016
comment
Входы не нужны: [видео]. Вместо этого объявите видео @Input (); в playlist.component.   -  person rook    schedule 07.09.2016
comment
как это написать? @Input (видео); ??   -  person Manspof    schedule 07.09.2016

Ответы (1)


arrow_upward
0
arrow_downward

Удалите входные данные из определения компонента и добавьте свойство input внутри класса.

import {Input} from '@angular/core';
export class PlaylistComponent{
    @Input() public videos: Array<Video>;
    onSelect(vid:Video){
        console.log(JSON.stringify(vid));
    }
}
person Pritesh Acharya    schedule 07.09.2016
comment
Мне очень понравилось это видео, там тоже работает - person Manspof; 07.09.2016
comment
то же самое, я также получаю исключение. ИСКЛЮЧЕНИЕ: ошибки синтаксического анализа шаблона: невозможно выполнить привязку к 'ngFor', поскольку это не известное собственное свойство (‹/thead› ‹tbody› ‹tr [ERROR -›] * ngFor = let v of видео ›‹td› {{v.id}} ‹/td› ‹td› {{v.title}} ‹/td›): PlaylistComponent @ 9:13 - person Manspof; 07.09.2016