angular - @Input() 属性无法访问，因为它说对象在未定义的 Angular 2 中

Question

我将数据传递到一个可访问的子组件中，我可以使用这些数据构建我的 View 。但是，我需要访问 @Input 对象上的属性以“查找”数组中具有相同值的项目。相当简单直接。当组件加载时，我在我的构造函数中执行此操作，因此它立即可用。

但是，@Input 对象未定义，因此我无法访问该属性。有人可以看一下并告诉我这里发生了什么吗？

返回 undefined object 是“this.ConfirmOrderData”，就像我说的，我可以在这个对象属性数组等上执行 ngFor 重复，所以我很困惑为什么它是未定义的。

代码:

@Input() ConfirmOrderData:{
    orderRefillData: Array<any>,
    selectedUser: any,
    DeliveryTypeId: any,
    PickupLocationId: any,
    PaymentTypeId: any,
    AddressType: any
};

constructor(
fb: FormBuilder,
public refillService: refillService,
public globalService: globalService
) {
   this.userInfo = this.globalService.getUserInfo();
   this.deliveryAddress = this.userInfo.userInfo.StreetAddresses.find((item) => item.DeliveryTypeId == this.ConfirmOrderData.AddressType.AddressTypeId)
   //the this.ConfirmOrderData object in the above line comes back undefined. Don't know why.
}

Answer 1

这是因为您试图在构造函数中对 @Input 执行操作。在执行构造函数中的操作时，尚未设置输入值。您需要将此逻辑移动到 ngOnInit，以便设置值，另请参阅:Difference between Constructor and ngOnInit

因此，将您的逻辑移至 OnInit，它应该很好 :)

ngOnInit() {
   this.userInfo = this.globalService.getUserInfo();
   this.deliveryAddress = this.userInfo.userInfo.StreetAddresses.find((item) => 
        item.DeliveryTypeId == this.ConfirmOrderData.AddressType.AddressTypeId)
}