title: Angular2 component method returns NaN despite type casting
body: <p>This has slowed me down today....</p>
  
  <p>I have the following method inside a component:</p>
  
  <pre><code>utility(prop:string):number {
   let ob:number;
   this.meals.map( something =&gt; {
    something.items.map( item =&gt; {
     ob += item.info[prop];
     console.log(prop, item.info[prop]);
    });
   });    
   return ob;
  }
  </code></pre>
  
  <p>These are some of the ways I call this function:</p>
  
  <pre><code> fatStats(){
    let total_fat: number = 0;
    let total_sat_fat: number = 0;
  
    return {
     totalFat: total_fat = this.utility('fat'),
     totalFatDV: ( total_fat / allowedFat ) * 100,
     totalSatFat: total_sat_fat = this.utility('satfat'),
     totalSatFatDV: ( total_sat_fat / allowedSatFat ) * 100,
     totalPolyFat: this.utility('polyfat'),
     totalMonoFat: this.utility('monofat'),
     totalTransFat: this.utility('transfat')
    }
   }
  </code></pre>
  
  <p>The fatStats method is called from my view template:</p>
  
  <pre><code>&lt;div class="label head"&gt;Total Fat
   &lt;div id="totalFat" 
        class="weight total_fat_na"&gt;
        {{ fatStats().totalFat | number : "1.0-1"}}g
   &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="totalFatP" 
       class="dv total_fat_na_p"&gt;
       {{ fatStats().totalFatDV | number : ".0-0" }}%
  &lt;/div&gt; 
  &lt;div class="labellight"&gt;Saturated Fat
   &lt;div id="totalSatFat" 
        class="weight saturated_fat_na"&gt;
        {{ fatStats().totalSatFat | number : ".0-0" }}g
   &lt;/div&gt; 
  &lt;/div&gt;
  &lt;div id="totalSatFat" 
       class="dv saturated_fat_na"&gt;
       {{ fatStats().totalSatFatDV | number : ".0-0" }}%
  &lt;/div&gt;
  </code></pre>
  
  <p>The console.log indicates correct properties and values, but in all cases the actual output is a NaN, despite various attempts to force a number out of this utility function I can't get it to.</p>
  
  <p>Any ideas would be appreciated.</p>
  
  <p>Steve </p>