angular child 在接收到 parent 数据之前渲染

Question

我有一个 parent 组件 (app.component) 发出 http 请求，将结果分配为 this.stats 然后将其作为道具传递给 child (progression.component).我的问题似乎是我的 child 在从 parent 获取任何数据之前正在渲染，导致 child 抛出错误并中断。

即我得到 -> {} [[Prototype]]: Object 当我在我的 child 组件中记录道具时

我只是没有经验，但由于我所有的组件都使用 ngOnInit() 并订阅了可观察对象，我认为 child 应该等待 parent 完成？我不确定我该如何解决这样的问题，因为它存在于各个组件中，并且不是我可以合并我认为的可观察对象的情况……任何见解都会很棒 :) 谢谢！

parent分量

export class AppComponent {
  title = 'pctothemoon';
  stats: any

  
  constructor(private specsService: SpecsService) {}

  ngOnInit(): void {
    this.specsService.getStats().subscribe((res)=>{this.stats=res})
    }

}

child分量

export class ProgressionComponent {
  @Input() stats: any;
  oldStats: any;
  constructor(private specsService: SpecsService) { }

  ngOnInit(): void {
    this.specsService.getProgress().subscribe((res)=>{console.log(res)})
    }

    AfterViewInit(){
      this.specsService.postUpdates(this.stats).subscribe((res)=>{console.log("updated stats", res)})
    }
}

作为参考，我还将包含我的 service.ts 以在后台显示我的 http 请求

export class SpecsService {
  private apiUrl = 'http://localhost:3000'
  constructor(private http:HttpClient) {}


  getStats():Observable<any>{
    return this.http.get(`http://localhost:8888/fetchStats`)
 }

postUpdates(stats):Observable<Object>{
  //send stats to json server store
  const url = `${this.apiUrl}/progressionData`; //json server collection location
  return this.http.post(url,stats,httpOptions) + stats 
  
}
getProgress(){
  return this.http.get(`${this.apiUrl}/progressionData`)
}

}

Answer 1

答案很简单。只需将 child 组件包装在 HTML:

中的 *ngIf 中

<ng-container *ngIf="!!stats">
  <app-child-component [stats]="stats"></app-child-component>
</ng-container>

条件是 child 需要的数据可用。这里，child组件只有在数据可用后才会被创建。

angular child 在接收到 parent 数据之前渲染

angular child rendering before parent data is received

http

prop

angular