Angular HTTP Observable @Input

Question

вот мой псевдокод:

сервис

getData(): Observable<MyData[]>{
  return this.http.get<Data[]>(`https://localhost/api/data`);
}

компонент:

myData: Data[];
[...]

ngOnInit(){
 this.myService.getData.subscribe( data => {
   this.myData = data;
   console.log(data);
 });
}

Шаблон:

<app-subComponent *ngIf="data" class="cat-row" [data]='{"type": "row", "data": myData}'></app-subComponent> 

Подкомпонент:

@Input() data: any;

ngOnInit(){
 console.log(data);
}

Моя проблема: В этом сценарии console.log дает мнепустой массив.Если я не передам этот атрибут данных моему субкомпоненту с помощью ввода, мой первый файл console.log даст мне правильный массив.

Так что, может быть, я что-то упустил, если хочу использовать http, observable, templating и @input в одной «строке»?

Спасибо за помощь!

Answer 1

Вы должны реализовать OnChanges, чтобы иметь возможность обнаруживать ввод при его изменении.

1. Импорт пакета

   import {Component, Input, OnChanges, SimpleChanges }

2. Затем реализует Onchanges

   export class SubComponent implements OnChanges {
      @Input() data: any;
      constructor() { }
      ngOnChanges(changes: SimpleChanges){
         if(changes["data"] && this.data){
            // here you get the result
         }
      }
   }