从 Angular 父组件传递到子组件的数据在子组件中未定义

Question

我有一个父组件将信息传递给子组件，但它是未定义的。如果这是 Angular 101，我很抱歉，但是如何延迟子组件渲染或运行任何 javascript，直到它获得所需的输入？

拉取数据的父组件 ngOnInit：

public ngOnInit(): void {

     this.productService.getProductById(1).subscribe(product => {

            this.product = product;

        });

}

父组件 HTML：

<child-component [product]="product" id="myProduct"></child-component>

子组件输入声明：

@Input() public product: Product;

子组件 ngOnInit 需要产品存在：

public ngOnInit(): void {

     // It is returning as undefined

     console.log(this.product);

}

Answer 1

这是因为产品是异步加载的，因此当视图最初呈现时，产品是未定义的&nbsp;<child-component *ngIf="product" [product]="product" id="myProduct"></child-component>您也可以使用 OnchangesngOnChanges(changes: SimpleChanges) {&nbsp; &nbsp; if (changes['product']) {&nbsp; &nbsp; &nbsp; &nbsp; let variableChange = changes['product'];&nbsp; &nbsp; }}