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中我有

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

在rating.component中我有

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循环。

有人可以解释一下吗？

由于

Answer 1

这就是ngFor所做的：

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

被渲染成：

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


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

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

然后您的每个产品组件都包含评级组件，并将其与其特定产品（来自阵列）一起提供。

<强> [UPDATE]

你的products.component有这个模板：

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

并在您的product.component中设置了选择器：

selector: 'product'

注意模板中的<product>元素。也就是说，同时，product.component的选择器如此有效，知道只要在模板中使用元素<product>，它就应该运行product.component。

angular2帮助和澄清

1 个答案: