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