title: angular2 variable becomes undefined in post request, synchronization failure
body: <p>I am working on an ecommerce web application using Angular2. </p>
  
  <p>I have saved ordered information in session.</p>
  
  <pre><code>addToCart(productId:string,noOfItems:number):void{
      let itemCounts;
      let selectedItems=[];
  
      if(sessionStorage.hasOwnProperty("cartItemCount"))
      {
          itemCounts = parseInt(sessionStorage.getItem("cartItemCount"));
          itemCounts++;
          sessionStorage.setItem("cartItemCount",itemCounts.toLocaleString());
      }else{
          sessionStorage.setItem("cartItemCount","1")
      }
      this._addtocartService.updateCount.emit("itemAdded");
      this._notificationService.success("Success","item added to Cart");
      let item={
          productId:productId,
          productName:this.productDetail.name,
          packageName:this.selectedPackage.packageName,
          Rate:this.selectedPackage.price,
          unit:this.selectedPackage.unitPerQuantity,
          quantity:noOfItems,
          packageId:this.selectedPackage._id,
          owner:this.owner._id
      }
      if(sessionStorage.getItem("CartContent") != undefined)
      {
          let test = JSON.parse(sessionStorage.getItem("CartContent"));
           for(let loop=0;loop&lt;test.length;loop++) {
               if(test[loop].productId==productId) {
  
               }
           }
      }
      if(sessionStorage.hasOwnProperty("CartContent")) {
  
          selectedItems=JSON.parse(sessionStorage.getItem("CartContent"));
      }
      selectedItems.push(item);
      sessionStorage.setItem("CartContent",JSON.stringify(selectedItems));
      console.log(sessionStorage.getItem("CartContent"));
  }
  </code></pre>
  
  <p>I have cartItem component where all the ordered information is to be displayed. In that component I get ordered items from session like this.</p>
  
  <pre><code>export class cartItemComponent{
  private Orders:any;
  private total:number;
  constructor(private dataService:DataService,
              private loggerService:LoggerService){
  
      this.getCartContent();
      this.calculatePrice();
  
  
  }
   getCartContent(){
      this.Orders = JSON.parse(sessionStorage.getItem("CartContent"));
  
      console.log("from Orders");
      console.log(this.Orders);
      var products = JSON.parse(sessionStorage.getItem("product"));
  
   }
  
   calculatePrice() {
       let i;
  
       for (i = 0; i &lt; this.Orders.length; i++) {
           console.log("this is order");
           console.log(this.Orders[i]);
  
           this.dataService.post("order/prices", this.Orders[i])
               .subscribe(res =&gt; {
                  console.log(res);
                  console.log(this.Orders[i]);
                  this.total+=res.totalPrice;
                   this.Orders[i]['totalPrice'] = res.totalPrice;
               });
  
           console.log("Total is " + this.total);
           if(i==this.Orders.length){
               this.loggerService.log(this.Orders,"green");
           }
           // setTimeout(()=&gt;{
           //     for (i=0;i&lt;this.Orders.length;i++){
           //         this.Orders[i]['totalPrice']=233;
           //     }
           //
           //     console.log("inside timeout");
           // },3000);
  
       }
   }
  
   //}
  </code></pre>
  
  <p>}</p>
  
  <p>I pass that information to the api from calculatePrice() method to get only total price of each type of items from api.
  But inside that subscribe, this.Orders[i] is undefined and I cannot add new json key this.Orders[i]['totalPrice']  and  its value inside that.</p>
  
  <p>Next I have to display that information in table using a loop statement.</p>
  
  <p>Help will be appreciated</p>