Angular 2如何使用我在html中的组件中获得的数据

Question

Hi I am currently having difficulty binding data using Angular2.

I have this data getting from server and I ngFor the data which includes price or certain product.

But I also have math algorithm to add an additional fee on the product which means I need to pass the data that has been ngFor to the component so that component can use the data.

How could I achieve this?

 <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>

I want to pass this 'r.value['charge']' data to component.

Thank you!

Answer 1

You should create a new collection of products, one that has the additional property in your component. Iterate over this collection via ngFor .

Here is an example:

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
}