NgFor не работает угловой 2

Question

Он отлично работал на альфа-42, но на бета-версии ngFor ничего не делает. код компонента:

import {Component} from 'angular2/core'; 
import {CORE_DIRECTIVES} from 'angular2/common'; 
import {ROUTER_DIRECTIVES} from 'angular2/router'; 

    @Component({ 
     selector: 'catalog', 
     templateUrl: '/src/app/templates/catalog.html', 
     directives: [CORE_DIRECTIVES, ROUTER_DIRECTIVES] 
    }) 
    export class CatalogComponent { 
     public products: Object[] = [ 
      { 
       "id": 42, 
       "title": "19848", 
       "description": "George Orwell's novel of a totalitarian future society in which a man whose daily work is rewriting history tries to rebel by falling in love.", 
       "image": "http://u.livelib.ru/reader/jennlawer/o/q2vh8epd/o-o.jpeg" 
      } 
     ]; 
     constructor() { } 
    } 

catalog.html код шаблона:

<h1>test</h1> 
<div class="row"> 
    <div class="col-sm-3" *ngFor="#product of products"> 
    <div class="card"> 
     <img class="card-img-top img-responsive" [src]="product.image" alt="Card image cap"> 
     <div class="card-block"> 
     <h4 class="card-title">{{product.title}}</h4> 
     <p class="card-text">{{product.description}}</p> 
     <a [routerLink]="['/Product', {id: product.id}]" class="btn btn-primary">Button</a> 
     </div> 
    </div> 
    </div> 
</div> 
<router-outlet></router-outlet> 

корень приложения компонент

import {Component, provide} from 'angular2/core'; 
import {bootstrap} from 'angular2/platform/browser'; 
import {RouteConfig, ROUTER_DIRECTIVES, HashLocationStrategy, LocationStrategy, ROUTER_PROVIDERS} from 'angular2/router'; 
import {CatalogComponent} from './components/catalog'; 
import {ProductComponent} from './components/product'; 
@Component({ 
    selector: 'app', 
    template: '<h1>eShop</h1><router-outlet></router-outlet>', 
    directives: [ROUTER_DIRECTIVES] 
}) 
@RouteConfig([ 
    { path: '/', as: 'Catalog', component: CatalogComponent }, 
    {path: '/product/:id', as: 'Product', component: ProductComponent}, 
]) 
class AppComponent { } 
bootstrap(AppComponent, [ 
    ROUTER_PROVIDERS, 
    provide(LocationStrategy, {useClass: HashLocationStrategy}) 
]); 

этот шаблон в том числе правильно, потому что я могу видеть h1 тест на странице, но я не может видеть результат ngFor

Answer 1

Ваш пример отлично работает (см. this plunk).

Возможно, у вас возникли проблемы с маршрутизатором. Убедитесь, что вы добавили ROUTER_PROVIDERS к bootstrap функции и инициализируется LocationStrategy:

import {bootstrap} from 'angular2/platform/browser'; 
import {provide} from 'angular2/core'; 
import {CatalogComponent} from './app'; 
import {ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from 'angular2/router'; 

bootstrap(CatalogComponent, [ 
    ROUTER_PROVIDERS, 
    provide(LocationStrategy, { useClass: HashLocationStrategy }) 
]);