Javascript 页面在Angular2中发出过多HTTP请求

Javascript 页面在Angular2中发出过多HTTP请求,javascript,angular,ionic-framework,ionic3,Javascript,Angular,Ionic Framework,Ionic3,这是我的.ts代码 userCount(event_id){ this.http.get('http://localhost/getCount.php?event_id='+event_id) .subscribe(res=>{ this.eventUserCount = res.json(); console.log("User NUM :: ", this.eventUserCount) return this.e

这是我的.ts代码

 userCount(event_id){
    this.http.get('http://localhost/getCount.php?event_id='+event_id)
      .subscribe(res=>{
        this.eventUserCount = res.json();
        console.log("User NUM :: ", this.eventUserCount) 
        return this.eventUserCount
      });

  }
这是调用上述函数的HTML代码:

<div *ngFor="let event of events">
....    
<ion-col col-6 center text-center>
    <button  ion-button>
        <div> {{ userCount(event.event_id) }} Users</div>
    </button>
</ion-col>
...
</div>

....    
{{userCount(event.event_id)}}个用户
...
我从服务器得到无限的响应(从console.log可以看到) 我想对每个列表项进行单独的http请求,并显示每个事件的计数,而不是这个无限的请求和响应循环。
有人能帮我吗???

你可以在angularjs 1中使用类似于
nginit
的东西

创建这样一个指令

@Directive({
  selector: '[initCall]'
})
export class initCall {

  constructor() {}
  ngOnInit() {      
     this.initCall()
  } 

}
<div *ngFor="let event of events">
....    
<ion-col col-6 center text-center>
    <button  ion-button>
        <div  [initCall]="userCount(event.event_id)"> Users</div>
    </button>
</ion-col>
...
</div>
像这样修改html

@Directive({
  selector: '[initCall]'
})
export class initCall {

  constructor() {}
  ngOnInit() {      
     this.initCall()
  } 

}
<div *ngFor="let event of events">
....    
<ion-col col-6 center text-center>
    <button  ion-button>
        <div  [initCall]="userCount(event.event_id)"> Users</div>
    </button>
</ion-col>
...
</div>

....    
使用者
...
“不要在绑定中使用函数。您的函数将被调用 每个变化检测周期。在开发模式下,角度运行x2个周期”

意味着永远不要使用{{Fun()}}它会降低您的性能和糟糕的做事方式。你的呼叫为循环。非常糟糕

你可以这样试试

创建事件子组件并传递事件对象

在*ngFor渲染之前创建完整对象并传递给*ngFor


您会收到无限的HTTP请求,因为ionic view总是从其组件中查找更改。因此,总是调用方法
userCount
。这是正常的。 从视图调用方法/使用管道是不好的做法。它会给你的应用程序带来性能问题

您可以使用如下方法从HTTP请求中获取数据并保存它们

let userCounts: Map<number, any> = new Map<number, any>(); // define this as global

onInit()方法中调用此方法。然后,您可以使用
userCounts
在视图中进行迭代。

这是Angular2中显示的错误。
您可以为Angular2给出相同的代码吗
这是。initCall()
给出错误。第二个选项听起来不错。。但是我已经在使用ngFor循环了…我将如何使用另一个for循环在完成的对象上进行迭代。一些代码将非常有用。您是如何接收事件对象的?从服务。我应该检查一下你们的部件,否则我可能会把球投错方向。