Page making too many HTTP Requests in Angular2

Question

This is my .ts code

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

  }

this is the HTML code from where there above function is being called:

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

I am getting infinite response from the server(as seen from console.log) I want to make separate http request for every list item and show the count for every event , instead of this infinite request and response loop. Can anyone help me with this??

score 1 · Answer 1 · answered Jun 15 '17 at 19:58

1

"Don't use functions in bindings. your function will be called on every change detection cycle. and angular runs x2 cycles in dev mode"

means never use {{ Fun() }} it will decrease your performance and its bad way of doing things. your calling inside For loop. it's very bad.

You can try like this

create event Subcompoent and pass event Object

or

Before *ngFor rendering create complete Object and pass to *ngFor

Call a function inside ngFor in angular2

answered Jun 15 '17 at 19:58

CharanRoot

6,181
2
27
45

the second option sounds great ..but i am already using on ngFor loop...how will i use another for loop to iterate over the completed object. some code will be really helpful. – herehere Jun 15 '17 at 20:24
How are you receiving events Object ? from service. I should your component otherwise i may throw ball in wrong direction. – CharanRoot Jun 16 '17 at 12:55

score 0 · Answer 2 · answered Jun 15 '17 at 19:32

0

you can use something similar to ng-init in angularjs 1.

create a directive like this

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

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

}

modify the html like this

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

answered Jun 15 '17 at 19:32

Sachila Ranawaka

39,756
7
56
80

Thisi is showing error in Angular2..can you give the same code for angular2 `this.initCall()` gives error. – herehere Jun 15 '17 at 19:51

score 0 · Answer 3 · answered Jun 16 '17 at 06:57

You get infinite HTTP requests because of, ionic view always looking for changes from its component. So always the method userCount is calling. It is normal. It is bad practice to call methods/using pipes from view. It gives performance issues in your app.

Any way you can use a method as follows to get data and save them from HTTP requests

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

Call this method in onInit() method. then you can use userCounts to iterate in view.

Page making too many HTTP Requests in Angular2

3 Answers3