目前我有三个组件，父组件下ngFor中有一个子组件，因此循环出来的就有好几个子组件，而每个子组件的内容可能都不一样。那么我要如何将此子组件中所有的内容获取？，如下图，请使用angular2

我想要的效果就如上图所示，现在我已经实现了红色框内的组件了，而且也实现了红色框中点击增加数字的效果。
但是购物车中，我却无法实现总量的计算。请大牛指点下吧！相关代码如下：

foodinfo.ts

import {Component, Injectable, OnInit, ElementRef} from '@angular/core';
import { NavController,NavParams } from 'ionic-angular';
import 'rxjs/Rx';
import { Http } from '@angular/http';
import {food} from '../../app/food';
import {Count} from '../count/count';
import {Cart} from '../cart/cart';

@Component({
  selector: 'page-foodinfo',
  templateUrl: 'foodinfo.html',
  providers:[Count,Cart]
})
@Injectable()
export class FoodInfo implements OnInit{
  public title ='';
  public Foods :food[];
  public apiUrl='http://www.egtch.com/demo/bindo/data.php';
  public id=0;
  public sid = 0;
  public sel =[];
  public show= true;
  public cartcount = [];
  public iscount:number;
  public price:number;
  public itemPrice:number;
  constructor(public navCtrl: NavController,navParams:NavParams, public http: Http,el:ElementRef) {
    this.id = navParams.get('isId') - 1;
    this.title = navParams.get('title');
    http.get(this.apiUrl).subscribe(res=> this.Foods = res.json()[this.id].cat);
    http.get(this.apiUrl).subscribe(res=> this.sel = res.json()[this.id].cat[this.sid].setmeal);
    var ele = el.nativeElement.querySelector('.count');
    console.log(ele);
  }

  /*@ViewChild(Count) count:Count;*/
  /*ngAfterViewInit() {
    // do something with list items
    console.log(this.count);
  }*/
  ngOnInit(){}
  getSid(sid){
    this.sid=sid;
    console.log(sid);
    this.http.get(this.apiUrl).subscribe(res=> this.sel = res.json()[this.id].cat[this.sid].setmeal);
  }
  getCount(event){
    this.cartcount = event;
    //for(let i=0;){}
    //console.log(this.cartcount);
  }
}

foodinfo.html

  
    
      {{title}}
    
  



  

    

      
      {{l.name}}
    
    

      

      

        

          {{s.name}}({{s.numb}}件)
          

            ${{s.price}}
            
                
            
            
                
            
          
        
      
    

  
  

count.ts(这个就是红色框的组件)

import { Component, Output, EventEmitter } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'count',
  templateUrl: 'count.html'
})
export class Count {
  public show= true;
  public icount=0;
  constructor(public navCtrl: NavController) {};
  addCount(){
    this.icount++;
    this.show = false;
    console.log(this.icount);
    this.countOut.emit(this.icount);
  }
  delCount(){
    if(this.icount>0){
      this.icount--;
      this.show = false;
    }
    if(this.icount<1){
      this.icount = 0;
      this.show = true;
    }
    this.countOut.emit(this.icount);
  }
  @Output() countOut = new EventEmitter();
}

count.html

-
{{icount}}
+

cart.ts(购物车组件)

import { Component,Input } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'cart',
  templateUrl: 'cart.html'
})
export class Cart {
  constructor(public navCtrl: NavController) {};
  @Input() count: number;
  @Input() selectFood;
  totalCount(v) {
    let count = 0;
    count = v;
    //console.log(this.count)
    return count;
  }
}

cart.html

  
{{totalCount(count)}}
  
查看订单
  
$220