从 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

这是因为产品是异步加载的，因此当视图最初呈现时，产品是未定义的

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

您也可以使用 Onchanges

ngOnChanges(changes: SimpleChanges) {
    if (changes['product']) {
        let variableChange = changes['product'];
    }
}