网站搜索

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>