从 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'];

    }

}