0

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>

ルート アプリ コンポーネント

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 の結果は表示されません。

4

1 に答える 1

2

あなたの例はうまくいきます（この plunkを見てください）。

ルーターに問題があるのか​​もしれません。関数に追加ROUTER_PROVIDERSして初期化したことを確認してください。bootstrapLocationStrategy

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 })
]);
于 2015-12-17T05:34:46.473 に答える