synchronous method angular 2

Question

I have cell in grid that contains number of users per each company, this number comes from typescript method getNumberOfUsers() ,this method call Back-End web service return number of users . Issue: all cells displayed 0, Although getNumberOfUsers() print number of user in console

 <tr>
   <td>
     {{ getNumberOfUsers() }}
   </td>
 </tr>

component ts file

getNumberOfUsers(): number {
  let NumUser=0;
  this.callServices.getUserCount().subscribe((res: any) => {
    NumUser = JSON.parse(res._body).numberOfUser;
    Console.log(“NumUser=”+ NumUser)
  },
    (err) => console.error(' getUserCount::err==' + err)
  );

  return NumUser;
}

callService file

getUserCount(): Observable<any> {
  return this.http.post(this.apiUrl+'/ getUserCount);
}

I want to make synchronous method

score 0 · Answer 1 · answered Sep 19 '17 at 14:42

Async method doesn't work in synchronous way. Recommend you to read up on How does JavaScript handle AJAX responses in the background?

You could consider using using async pipe in this case to display a value filled by async nature.

Change your factory method to return json from it.

getUserCount ():Observable<any>
{
    return this.http.post(this.apiUrl+'/ getUserCount).map(data => data.json())
}

//change getNumberOfUsers to return getUserCount Observable 
getNumberOfUsers(): Observable<any>{
    this.callServices.getUserCount();
}

Html

{{ (getNumberOfUsers() | async)?. numberOfUser}}

synchronous method angular 2

1 Answers1