时间戳

首页 > 解决方案 > 从 Angular 父组件传递到子组件的数据在子组件中未定义

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

问题描述

我有一个父组件将信息传递给子组件，但它是未定义的。如果这是 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);
}

标签： javascriptangular

解决方案

这是因为产品是异步加载的，所以当视图最初渲染时，产品是未定义的

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

你也可以使用 Onchanges

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

推荐阅读