订阅函数导致循环

Question

我正在尝试使用 cryptocompar 的 API 来获取数据。

更新了更多细节并从代码中删除了 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>  

coinGroup 将从库页面获取符号，例如 ['BTC','ETH',..etc]

在 chrom 的控制台上，它会如下所示一直循环，直到浏览器崩溃。

当使用 subscribe() 和 map 时，会导致如上所示的无限循环，不知道为什么，以及如何解决这个问题？

Answer 1

您的视图应该是被动的，它应该只显示结果。在这里，您正在视图显示中调用一个函数，该函数会更改数据，可能会更改视图，会更改数据...等等...

Answer 2

如上所示，我删除了 ngClass，但仍然出现循环。

//来自图书馆页面的数据coinGroup = [];

数据信息：可观察的；

硬币：任何；

构造函数（公共 navCtrl：NavController，公共 navParams： 导航参数，公共 http: HttpClient) { }

ionViewDidLoad() {

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

获取详细信息（硬币）{

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 3

是的。

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

是问题所在。 ngClass 尝试为 class 设置 string 值。 （所以你可以应用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>