0

I am new to type script and angular 4.

I created a component thats uses a service to get a list of room ids from a rest api. Then I use ngfor to loop over this list and inside the loop I populate a new component and pass in the id as an input. Inside the onInit method I then call the api again to get the details.

Somehow each compoment waits for the last one to have finished its onInit method. The call to the api sometimes takes a few seconda which makes the ui really slow.

How should I implement this exactly?

Thanks for the help

Matt

Lucas
  • 9,871
  • 5
  • 42
  • 52
Matteo
  • 232
  • 3
  • 17
  • That is almost certainly a server issue :/ – Lucas Dec 01 '17 at 19:34
  • Hmm but if i look at the network tab inside chrome i see the first call return after x seconds and then the second one starts...i will try to get some screenshots... – Matteo Dec 01 '17 at 19:37
  • Ok, maybe this article can help you out https://coryrylan.com/blog/angular-multiple-http-requests-with-rxjs – Lucas Dec 01 '17 at 19:42
  • If it isnt a server issue you should be able to pull it off using rxjs as shown in the article... just make sure the server and db engine can handle multiple requests and pools... said this just in case since I have no idea what your architecture is like – Lucas Dec 01 '17 at 19:45
  • 1
    So I tried using another browser (Safari) and it worked. I saw that Chrome stalled the connection and did not start it. This is a behavior of Chrome so to speak. https://stackoverflow.com/questions/27513994/chrome-stalls-when-making-multiple-requests-to-same-resource – Matteo Dec 03 '17 at 19:34

1 Answers1

0

I would try to flatten your data as much as possible. However, if that isn't possible I would fetch all the data in the main component before it get's rendered into view. Just chain the http calls and construct your array of data before passing it into view.

wdumlao
  • 28
  • 4