自定义组件的构造函数中的参数始终未定义

Param in constructor of custom component is always undefined

我在 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 的构造函数中,即使 customFieldscountries 没问题,groupedCustomFields 始终未定义。

constructor(params: any) {
   this.customFields = params.customFields;
   this.groupedCustomFields = params.groupedCustomFields;//undefined
   this.countries = params.countries;
}

为什么会这样?我该如何解决?

这是您的代码:

<component1 params="{
   customFields: customFieldsForAdvSearch
   groupedCustomFields: groupedCustomFields,
   countries: countries
   }">
</component1>

您的组件调用中缺少逗号,只需添加它即可,这是您在 ViewModel 上接收未定义参数时的常见问题

<component1 params="{
   customFields: customFieldsForAdvSearch,
   groupedCustomFields: groupedCustomFields,
   countries: countries
   }">
</component1>