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

Question

我在 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;
}

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

Answer 1

这是你的代码:

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

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

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