Добрейшего вечерочка.
Сразу к делу.
Есть компонент main, который реализует OnInit, в котором идет обращение к серверу, и полученный массив данных записывается в переменную products компонента. Вроде четко и ясно.
main имеет разметку типа:
...
<product [data]="products[0]"></product>
<div class="small">
<product class="small_product" *ngFor="let index of [1, 2]" [data]="products[index]"></product>
</div>
...
Абстрагируемся от того, что данные с сервера могут не придти или их кол-во будет меньше 3. Не обращаем на это внимание.
Так вот. Компонент product тоже реализует OnInit. Сейчас, запуская подобный код и получаю такую фигню в логах.
1) main - controller
2) product - controller <----
самый первый
3) main - OnInit
4) product - OnInit <----
самый первый
5) main - OnInit - запрос за сервер
6) product - controller
7) product - controller
8) product - OnInit
9) product - OnInit
Вот головную боль доставляют 2 и 4 шаги. main компонент еще не до конца ожил, а первый product уже взлетел, собственно и из products[0] данные в него не попали, потому, что данные получились только на 5 шаге.
Вот что из-за этого получается. Первый product инициализировался "по дефолту":
Должно работать примерно так:
1) main - controller
2) main - OnInit
3) main - OnInit - запрос за сервер
4) product - controller <----
самый первый
5) product - OnInit <----
самый первый
6) product - controller
7) product - controller
8) product - OnInit
9) product - OnInit
Подскажите с чем такое поведение может быть связано?
PS: запрос на сервер выполняется по всем канонам с использование Observable.subscribe