Question

它在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>

root app组件

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

NgFor没有工作角2

1 个答案: