Angular2 ngFor не работает

Question

Я пытаюсь реализовать основной список покупок, но мой ngFor в Angular не работает.

import { Component, View } from 'angular2/angular2'; 
 

 

 
@Component({ 
 
    selector: 'my-app' 
 
}) 
 
@View({ 
 
    template: '<h1>{{title}}</h1><ul><li *ngFor="let i of items"><span>{{i}}</span></li></ul>' 
 

 
}) 
 
export default class MyAppComponent { 
 
    title = 'ShoppinList'; 
 
    items = ['Milk','Ham','Eggs']; 
 
}

Единственное, что появляется это "загрузка ..." и я получаю более 10 загадочные ошибки.

Answer 1

Вы не должны использовать @View здесь.

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     {{title}} 
     <ul><li *ngFor="let i of items"><span>{{i}}</span></li></ul> 
    </div> 
    `, 
}) 

export class App { 
    title = 'ShoppinList'; 
    items = ['Milk','Ham','Eggs']; 
} 

Working plunker

Answer 2

Не пытаясь его первым заметил ошибку в операторе импорта в верхней части. Должно быть:

import { Component } from '@angular/core' 

Answer 3

@View() был удален почти год назад. Если вы видите примеры, которые его используют, просто переместите содержимое в декоратор @Component(), а directives и pipes были перемещены от @Component() до @NgModule() с declaration.

Вам нужно добавить CommonModule к @NgModule({ imports: [CommonModule], ...}) export class SomeModule{} в каждом модуле, где вы хотите использовать ngFor (или другие директивы shippled с Угловым - BrowserModule уже включает в себя CommonModule).

Answer 4

его хороший способ использовать ngIf и использовать свой шаблон в свойствах вашего компонента.

import { Component, View } from 'angular2/angular2'; 


@Component({ 
    selector: 'my-app', 
    template : '<div> 
     <h1>{{title}}</h1> 
     <ul *ngIf="items"> 
      <li *ngFor="let i of items"><span>{{i}}</span></li> 
     </ul> 
    </div>' 
}) 

export default class MyAppComponent { 
    title : string = 'ShoppinList'; 
    items : Array<string> = ['Milk','Ham','Eggs']; 
}