angular2 help and clarification

Question

私はGreg LimのTypeScriptでBeginning Angular2を読んでいます。

私は今までは第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が何をするかである

おかげ

Answer 1

<h2>Products</h2> 
    <div> 
     <product [data]="product1"></product> 
     </div> 


    <div> 
     <product [data]="product2"></product> 
     </div> 

     <div> 
     <product [data]="product3"></product> 
     </div> 
... 

は、あなたの各製品コンポーネントは、格付けコンポーネントが含まれていると（つまりその特定の製品とそれをフィードアレイから来た）。

あなたproducts.componentこのテンプレートを持っている

[UPDATE]：

selector: 'product' 

お知らせ<product>要素で：

template: `<h2>Products</h2> 
     <div *ngFor="let product of products"> 
      <product [data]="product"></product> 
      </div>`, 

とあなたのproduct.componentにあなたが選択設定した

あなたのテンプレート。つまり、同時にproduct.componentのセレクタは、要素 <product>がテンプレートで使用されているときにproduct.componentを実行する必要があることを知っています。