角2データを使用する方法htmlのコンポーネントで取得しました

Question

こんにちは、現在、Angular2を使用してデータをバインドするのが難しいです。

私はこのデータをサーバーから取得していますが、価格や特定の製品を含むデータはありません。

しかし、製品に追加料金を追加する算術アルゴリズムもあります。これは、コンポーネントがデータを使用できるように、コンポーネントにngForだったデータを渡す必要があることを意味します。

これをどのように達成できますか？

<div *ngFor="let r of products | keyValues"> 


     <div id="tutor-price"><span id="month">월 8회</span> <span id="price"> {{r.value['charge']}} </span></div> 

</div> 

この 'r.value [' charge ']'データをコンポーネントに渡したいとします。

ありがとうございました！

Answer 1

コンポーネントに新しいプロパティを持つ新しいコレクションを作成する必要があります。このコレクションをngForで繰り返してください。ここで

は一例です：

import {Component} from '@angular/core'; 

import Product from 'app/models'; 
import ProductService from 'app/services'; 

@Component({ 
    // boilerplate and ceremony 
}) 
export class ProductsComponent { 
    constructor(readonly productService: ProductService) {} 

    ngOnInit() { 
    this.productService.getAll().subscribe(products => { 
     this.products = products.map(product => ({ 
     ...product, 
     charge: calculateCharge(product) 
     })); 
    }); 
    } 

    products: Array<Product & {charge?: number}> = []; 
} 

function calculateCharge(product: Product) { 
    return 1; // stub 
}