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

【问题标题】：@Input() Properties Cannot Be Accessed Because It Says The Object In Undefined Angular 2无法访问 @Input() 属性，因为它说对象在未定义的 Angular 2 中
【发布时间】：2017-04-21 21:06:18
【问题描述】：

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

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

返回未定义的对象是“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.
}

【问题讨论】：

当您直接在模板中使用属性时，例如未观察到的数据必须定义或者您可以使用？喜欢data?.item?.couldbelate

标签： angular typescript

【解决方案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)
}

【讨论】：

您是否尝试过任一答案，是否有帮助或需要进一步帮助？ :)
我实际上在父组件中执行了这个操作，并将它包含在传递给子组件的数据对象中，所以它已经可用并以我需要的方式存储在变量中，但你的方式绝对是更加灵活，我将继续使用它（或者当我重构这篇文章时）。谢谢。

【解决方案2】：

创建模型

export interface ConfirmOrderData:{
    orderRefillData: Array<any>,
    selectedUser: any,
    DeliveryTypeId: any,
    PickupLocationId: any,
    PaymentTypeId: any,
    AddressType: any
};

在你的组件中使用它

@Input() confirmOrderData :Array<ConfirmOrderData>;

为避免未定义的问题，您需要将其实例化为

在你的定义中

@Input() confirmOrderData :Array<ConfirmOrderData>= new Array<ConfirmOrderData>();

或者在你的构造函数中作为

constructor(...){
    this.confirmOrderData  = new Array<ConfirmOrderData>();
}

当您执行上述操作时，您将在 orderRefillData 中收到另一个未定义的错误。要修复它，您应该在对象实例化为之后实例化该属性

this.confirmOrderData.orderRefillData = new Array<any>();

一个简单的解决方法是为所有属性分配空值

this.confirmOrderData ={
        orderRefillData:new Array<any>(),
        selectedUser: '',
        DeliveryTypeId: '',
        PickupLocationId: '',
        PaymentTypeId: '',
        AddressType: ''
}

【讨论】：