Javascript 订阅函数导致循环

我正在尝试使用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);
    });
  }

//来自库页面的数据
coinsGroup=[]；
数据信息：可观察

当将subscribe（）与map一起使用时，它会导致如上所示的无休止的循环，不确定原因以及如何解决此问题？
是的

{{coins}}

这就是问题所在。
ngClass
尝试为
类设置一个
字符串
值。（因此您可以应用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);
    });
}

datainfo：可观察；
硬币：任何；
构造函数（公共navCtrl:NavController、公共navParams:navParams、公共http:HttpClient）
{}
//加载视图后加载硬币，也可以在ngOnInit上完成
ionViewDidLoad（）{
此.getDetail（'BTC'）；
}
getdetail（硬币）{
this.datainfo=this.http.get（“https://min-api.cryptocompare.com/data/pricemultifull?fsyms=“+coin+”&tsyms=USD”）；
这是datainfo
.map（res=>res）
.订阅（数据=>{
this.coins=数据
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);
  }

let coinList=[“BTC”、“ETH”、“LTE”]；
构造函数（/*…*/）{}
getDetail（硬币）：可观察{
//不订阅，返回可观察的
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>


{{getDetail（coin）| async}}
如上图所示，我删除了ngClass，但仍然得到了循环

//来自库页面的数据coinsGroup=[]

数据信息：可观察

硬币：任何

构造函数（公共navCtrl:NavController，公共navParams:
NavParams，公共http:HttpClient）{}

ionViewDidLoad（）{

log（'IonViewDidLoadTestPage'）；
this.coinsGroup=this.navParams.data；}

getdetail（硬币）{

关于test.html

*ngIf=“coinsGroup.symbol”class=“bold1”>

{{getDetail（coinsGroup.symbol）}

您的视图应该是被动的，它应该只显示结果。在这里，您在视图显示中调用一个函数来更改数据，它可能会更改视图，更改数据…等等…
为什么在
ngClass
中调用该函数？它应该在那里设置什么？为什么在
ngClass
有必要吗？它不返回任何布尔值，我想调用getdetail（）函数内部的html，以获取数据，如美元价格，高，低的html。它是在测试页面上工作，但当我申请在真正的项目它是循环。我会重构代码，看看为什么它不工作。再次检查旧文件没有缓存，它看起来像你在使用chrome所以打开chrome开发工具（mac）
cmd+opt+i
/Network Tab/在顶部你会发现一个禁用缓存复选框。这样我就可以循环了，谢谢。
<ion-content padding>

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

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

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