0

I have three variables (before), (current) and (after).

I am getting data from an API constantly (every 1sec).

I am saving my current API info as (before) prior to updating and then I store the update in (after) once I update.

I am checking to see if before is different than (After), if so I am adding a class to the DOM.

Now the problem

When I console.log the values I can clearly see that at some points the two values differ. This is great, but when I bind the exact same data to the DOM, they are always the same. Has anyone seen this before?

DOM

<div class="ticker" *ngFor="let coinresult of coinResults; let beforecoinresult of beforeCoinResults; let aftercoinresult of afterCoinResults; let i = index;">
    <div class="wrapper" *ngIf="coinresult.name != step2Selection">
        <h1>Before: {{beforecoinresult.amount}} - After: {{aftercoinresult.amount}}</h1>
        <div class="pin" (click)="pinTitle(coinresult.amount, coinresult.name)">
            <i class="material-icons" *ngIf="pinnedCoinAmount != coinresult.amount">gps_not_fixed</i>
            <i class="material-icons selectedCoin" *ngIf="pinnedCoinAmount === coinresult.amount">gps_fixed</i>
        </div>

        <div class="amount" [ngClass]="{amountpinned: pinnedCoinAmount === coinresult.amount, 
                                        amountincrease: beforecoinresult.amount < aftercoinresult.amount,
                                        amountdecrease: beforecoinresult.amount > aftercoinresult.amount}">
                                        {{coinresult.amount}}
        </div>
        <div class="name" [ngClass]="{  namepinned: pinnedCoinAmount === coinresult.amount, 
                                        nameincrease: beforecoinresult.amount < aftercoinresult.amount,
                                        namedecrease: beforecoinresult.amount > aftercoinresult.amount}">
                                        {{coinresult.name}}

        </div>
    </div>

Component

convert(){
      this.beforeCoinResults = this.coinResults;
      if(this.holdings){
      console.log("before " + this.beforeCoinResults[0].amount);
    }
      this.coinResults = [];

      if(this.cryptoSelected && this.step2Selection){
        //convert all the crypto to currencies
        for (var i = 0; i<= this.currencies.length -1 ; i++){
          var tempName = this.currencies[i] as string;
          this.coinResults.push({
            name: this.convertName(tempName as string),
            amount: Math.round(this.holdings * this.ticker[this.convertName(this.step2Selection)].last * this.ticker['USDT_BTC'].last* this.currencyExchange[tempName]*100)/100}
          ); // push
        } // for

        //convert all the crypto to crypto
        for(var i = 0 ; i <= this.coins.length - 1; i++){
          var tempName = this.coins[i] as string;
          this.coinResults.push({
            name: this.convertName(tempName as string), 
            amount: Math.round(this.holdings * this.ticker[this.convertName(this.step2Selection)].last / this.ticker[tempName].last*100000000)/100000000
           }) // push   
        } // for
      } // if cryptoselected

      if(this.regSelected){
            //convert currency to currency
            for (var i = 0; i<= this.currencies.length -1 ; i++){
            var tempName = this.currencies[i] as string;
            this.coinResults.push({
              name: this.convertName(tempName as string),
              amount: Math.round(this.holdings / this.currencyExchange[this.convertName(this.step2Selection)] * this.currencyExchange[tempName]*100)/100
              }) // push
             } // for

             //convert currency to crypto
            for(var i = 0 ; i <= this.coins.length - 1; i++){
              var tempName = this.coins[i] as string;
              this.coinResults.push({
                name: this.convertName(tempName as string), 
                amount: Math.round(this.holdings / this.currencyExchange[this.convertName(this.step2Selection)] / this.ticker['USDT_BTC'].last / this.ticker[tempName].last*100000000)/100000000
                });  //push 
        } // for
      }// if 
      this.afterCoinResults = this.coinResults;
       if(this.holdings){
      console.log("after " + this.afterCoinResults[0].amount);
    }
    }// end convert
Bromox
  • 567
  • 2
  • 9
  • 29
  • Hi @Bromox, I guess that you are running into the infamous loop issue: https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example – Jonathan Brizio Apr 03 '17 at 02:27
  • I read this but the issue doesn't seem to be with my component.ts but with my DOM. I am getting proper info in my console. It will tell me if the values don't match, but if I bind the data to the DOM, they will always match. Am I missing something in the NgFor? – Bromox Apr 03 '17 at 13:43

0 Answers0