subscribe function causes loop

Question

I'm trying to use API from cryptocompar to get data.

Updated with more details and removed ngClass from the code. In test.ts

   // data from library page
   coinsGroup = [];

 datainfo: Observable<any>;


  coins:any;

  constructor(public navCtrl: NavController, public navParams: NavParams, public http: HttpClient) 
{
  }


  ionViewDidLoad() 
{

console.log('ionViewDidLoad TestPage');
    this.coinsGroup = this.navParams.data;
  }

 getdetail(coin) {

    this.datainfo = this.http.get("https://min-api.cryptocompare.com/data/pricemultifull?fsyms="+coin+"&tsyms=USD");
    this.datainfo.map(res => res)
    .subscribe(data => {
      this.coins = data['DISPLAY'][coin]['USD']['PRICE']
      console.log('my data: ', this.coins);
    });
  }

on test.html

 <span *ngIf="coinsGroup.symbol"  class="bold1">

 {{getDetail(coinsGroup.symbol)}}</span>  

coinsGroup will take symbol from library page such as ['BTC','ETH',..etc]

On the console on chrom it keeps looping as showing below, until browser crash.

When used subscribe() with map it causes endless loop as showing above, not sure why, and how to solve this problem?

Answer 1

Yes.

<span [ngClass]="getdetail('BTC')" class="bold1">{{ coins }}</span>

Is the problem. The ngClass tries to set a string value for the class. (So you can apply css). This is not what you're trying to do, you're trying to retrieve all the coins and then display them.

The way to do this is like so:

datainfo: Observable<any>;  
coins:any;

constructor(public navCtrl: NavController, public navParams: NavParams, public http: HttpClient) 
{}
// load the coins after the view is loaded, can also be done on ngOnInit
ionViewDidLoad(){   
    this.getDetail('BTC'); 
}

getdetail(coin) {
    this.datainfo = this.http.get("https://min-api.cryptocompare.com/data/pricemultifull?fsyms="+coin+"&tsyms=USD");
    this.datainfo
      .map(res=>res)
      .subscribe(data => {
        this.coins = data
        console.log('my data: ', this.coins);
    });
}

And simply setting

<ion-content padding>

  <div style="text-align: center;">
    <!-- the ngIf directive will only show this span if `coins` is defined -->    
    <span *ngIf="coins" class="bold1">{{ coins }}</span> 

</div> 
</ion-content>

---

If you want to create more coins, the best practice would probably as follows:

  let coinList = ["BTC", "ETH", "LTE"];

  constructor(/* ... */) {}


  getDetail(coin): Observable<any> {
    // don't subscribe, return Observable
    this.http.get("...").map(res=>res);
  }

And in your html

<ion-content padding>

  <div style="text-align: center;">

    <span *ngFor="let coin of coinList" class="bold1">
       {{ getDetail(coin) | async }}
    </span> 
</div> 
</ion-content>

Answer 2

Your view should be passive, it should just display the results. here you're calling a function in the view display which changes the data, which potentialy changes the view, which changes the data...and so on...