Javascript NgFor不工作，角度2

它在alpha 42上运行良好，但在beta0上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>

测试
{{product.title}}
{{product.description}
按钮

根应用程序组件

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

从'angular2/core'导入{组件，提供}；
从'angular2/platform/browser'导入{bootstrap}；
从“angular2/ROUTER”导入{RouteConfig、ROUTER_指令、HashLocationStrategy、LocationStrategy、ROUTER_PROVIDERS}；
从“./components/catalog”导入{CatalogComponent}；
从“./components/product”导入{ProductComponent}；
@组成部分({
选择器：“应用程序”，
模板：“eShop”，
指令：[路由器指令]
})
@线路图([
{path:'/'，as:'Catalog'，component:catalogponent}，
{path:'/product/：id'，as:'product'，component:ProductComponent}，
])
类AppComponent{}
引导程序（AppComponent[
路由器供应商，
提供（LocationStrategy，{useClass:HashLocationStrategy}）
]);

这个模板包括正确的，因为我可以在页面上看到h1测试，但我看不到ngFor的结果，因为您的示例运行良好（请参阅）

也许你的路由器有问题。确保已将

ROUTER\u PROVIDERS

添加到

bootstrap

函数并初始化：

从'angular2/platform/browser'导入{bootstrap}；
从'angular2/core'导入{provide}；
从“./app”导入{CatalogComponent}；
从“angular2/ROUTER”导入{ROUTER_提供者、LocationStrategy、HashLocationStrategy}；
引导（目录）组件[
路由器供应商，
提供（LocationStrategy，{useClass:HashLocationStrategy}）
]);

目录实际上不是我的根组件，请参阅更新问题，根组件中是否存在问题？@cheeseq您能创建一个复制错误的plunk吗？你可以用我的叉子做这个。哎呀，当我用叉子叉你的叉子时，我注意到angular2 polyfills没有包含在我的index.html中。问题解决了，多亏了您的帮助：）