私はGreg LimのTypeScriptでBeginning Angular2を読んでいます。angular2 help and clarification
私は今までは第4章まで、私はうまくいっていましたが、私はちょうど分で少し失われているようです。 app.moduleでは、私は次の宣言
AppComponent,
ProductsComponents,
RatingComponent,
ProductComponent
を持っているとapp.componentsに私は
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<h1>{{title}}</h1>
<products></products>`
})
export class AppComponent {
title: string = 'app works!!!';
}
を持っており、私のproducts.componentsに私はrating.componentで
import { ProductService } from './product.service'
@Component({
selector: 'products',
template: `<h2>Products</h2>
<div *ngFor="let product of products">
<product [data]="product"></product>
</div>`,
providers: [ProductService]
})
export class ProductsComponents {
products;
constructor(productService: ProductService) {
this.products = productService.getProducts();
}
}
を持っているI have
import { Component, Input } from '@angular/core'
@Component({
selector: "rating",
templateUrl: 'rating.component.html',
styles: [`
.glyphicon-star { color:orange; }
`]
})
export class RatingComponent {
@Input('rating-value') rating = 0;
@Input() numOfReviews = 0;
onClick(ratingValue) {
this.rating = ratingValue;
}
}
product.component私は
import { Component, Input } from '@angular/core';
@Component({
selector: 'product',
template: `<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="{{data.imageUrl}}" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">{{data.productName}}</h4>
{{data.releasedDate}}
<rating
[rating-value]="data.rating"
[numOfReviews]="data.numOfReviews">
</rating>
<br />
{{data.description}}
</div>
</div>
`,
styles: [`
.media {
margin-bottom:20px;
}
`]
})
export class ProductComponent {
@Input() data;
}
を持っており、最後にproduct.serviceに私は
export class ProductService {
getProducts() {
return [
{
imageUrl: "http://loremflickr.com/150/150?random=1",
productName: "Product 1",
releasedDate: "May 31, 2016",
description: "Product description for product 1",
rating: 2,
numOfReviews: 5
},
{
imageUrl: "http://loremflickr.com/150/150?random=2",
productName: "Product 2",
releasedDate: "May 31, 2016",
description: "Product description for product 2",
rating: 4,
numOfReviews: 6
},
{
imageUrl: "http://loremflickr.com/150/150?random=3",
productName: "Product 3",
releasedDate: "May 31, 2016",
description: "Product description for product 3",
rating: 1,
numOfReviews: 5
},
{
imageUrl: "http://loremflickr.com/150/150?random=4",
productName: "Product 4",
releasedDate: "May 31, 2016",
description: "Product description for product 4",
rating: 5,
numOfReviews: 1
}
];
}
}
すべての正常に動作しているがあります。
products.componentsがngForに渡す配列を入力していることを理解していますが、rating.componentとproduct.componentがforループにどのように引き込まれているかはわかりません。
誰かが説明できますか?
<h2>Products</h2>
<div *ngFor="let product of products">
<product [data]="product"></product>
</div>
がにレンダリングされる:ngForが何をするかである
おかげ
これらはすべてテンプレート内でお互いを使用していますが、この階層ではっきりしないものはありますか? – echonax