在Angular2中生成过多HTTP请求的页面

时间:2017-06-15 19:18:48

标签: 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.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>

我从服务器获得无限响应(从console.log中可以看到) 我想为每个列表项单独生成http请求,并显示每个事件的计数,而不是此无限请求和响应循环。 任何人都可以帮我解决这个问题吗?

3 个答案:

答案 0 :(得分:1)

  

&#34;不要在绑定中使用函数。你的函数将被调用   每个变化检测周期。和角度在开发模式下运行x2周期&#34;

意味着永远不要使用{{Fun()}}它会降低你的表现和糟糕的做事方式。你的内部呼叫For循环。这很糟糕。

您可以尝试这样

创建事件Subcompoent并传递事件Object

在* ngFor渲染之前创建完整的Object并传递给* ngFor

Call a function inside ngFor in angular2

答案 1 :(得分:0)

你可以在angularjs 1中使用与ng-init类似的东西。

创建一个像这样的指令

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

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

}

像这样修改html

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

答案 2 :(得分:0)

您获得无限的HTTP请求,因为离子视图始终在寻找其组件的更改。所以方法userCount总是在调用。这是正常的。 从视图中调用方法/使用管道是不好的做法。它会在您的应用中出现性能问题。

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

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

...

public saveUserCount(){
   for(let event of this.events) {
      this.userCounts.set(event.event_id,this.userCount(event.event_id));
   }
}

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