javascript - 自定义组件构造函数中的参数总是未定义
我在 ViewModel 中有 3 个 observableArrays;
groupedCustomFields: ko.ObservableArray<any> = ko.observableArray([]);
customFieldsForAdvSearch: ko.ObservableArray<any> = ko.observableArray([]);
countries: ko.ObservableArray<Country> = ko.observableArray([]);
在 ViewModel 的构造函数中,我用一些 API 请求的数据初始化了它们
constructor() {
//some other operations
this.loadCustomFields();
this.loadCountries();
}
private loadCustomFieldsForAdvSearch() {
dataService.Management.getCustomFields()
.done(response => {
this.groupedCustomFields(sortBy(new CustomFieldsService().getGroupedFields(response.collection), i => i.displayOrder));
this.customFieldsForAdvSearch(response.collection
.filter(l => defaultFields.indexOf(l.name) === -1)
.map(l => {
return {
fieldName: l.name,
displayName: l.display,
displayOrder: l.order,
value: ''
};
})
.sort((x, y) => x.displayOrder - y.displayOrder));
});
}
private loadCountries() {
dataService.Management.getCountriesWithStates()
.done(countries => {
this.countries(countries);
});
}
我传递给自定义组件的这个 observableArrays:
<component1 params="{
customFields: customFieldsForAdvSearch,
groupedCustomFields: groupedCustomFields,
countries: countries
}">
</component1>
问题:在 component1 的构造函数中,即使 customFields 和 countries 正常,groupedCustomFields 也总是未定义。
constructor(params: any) {
this.customFields = params.customFields;
this.groupedCustomFields = params.groupedCustomFields;//undefined
this.countries = params.countries;
}
这是为什么发生的?我应该如何解决它?
答案#1
这是你的代码:
<component1 params="{
customFields: customFieldsForAdvSearch
groupedCustomFields: groupedCustomFields,
countries: countries
}">
</component1>
你的组件调用缺少一个逗号,只需添加它就应该可以工作,这是在你的 ViewModel 接收到未定义参数时常见的问题
<component1 params="{
customFields: customFieldsForAdvSearch,
groupedCustomFields: groupedCustomFields,
countries: countries
}">
</component1>
