функция подписки вызывает цикл

Question

Я пытаюсь использовать API из cryptocompar для получения данных.

Обновлено с более подробной информацией и удалено ngClass из кода.В 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);
    });
  }

в test.html

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

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

coinsGroup будет принимать символ со страницы библиотеки, например ['BTC', 'ETH', .. и т. Д.]

На консоли chrom он продолжает цикл, как показано ниже, до сбоя браузера.

При использовании подписки () с картой возникает бесконечный цикл, как показано выше, не знаю, почему и как решить эту проблему?

Answer 1

Я удалил ngClass, как показано выше, но все еще получаю цикл.

// данные со страницы библиотеки coinsGroup = [];

datainfo: Observable;

coins: any;

конструктор (общедоступный navCtrl: NavController, общедоступный navParams: NavParams, общедоступный 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);
});   }

на test.html

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

{{getDetail (coinsGroup.symbol)}}}

Answer 2

Ваш взгляд должен быть пассивным, он должен просто отображать результаты.здесь вы вызываете функцию на экране представления, которая изменяет данные, которая потенциально меняет представление, которая изменяет данные ... и так далее ...

Answer 3

Да.

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

Это проблема.ngClass пытается установить значение string для class.(Таким образом, вы можете применить CSS).Это не то, что вы пытаетесь сделать, вы пытаетесь получить все монеты и затем отобразить их.

Способ сделать это так:

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);
    });
}

И просто установить

<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>

---

Если вы хотите создать больше монет, лучшая практикабудет, вероятно, следующим образом:

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

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


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

И в вашем HTML

<ion-content padding>

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

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