Question

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

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

未定义的对象是＆＃34; this.ConfirmOrderData＆＃34;就像我说的，我可以对这个对象属性数组等进行重复操作，所以我很难理解为什么它是未定义的。

CODE：

@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)
}

Answer 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: ''
}

@Input（）属性无法访问因为它在Undefined Angular 2中说明了对象

2 个答案: