淘汰赛可观察到的阵列下拉

时间:2018-12-20 15:15:15

标签: typescript knockout.js

根据删除文档,这应该可以工作,但是我仍然面临着一个空的下拉列表。 我的技能主要不在前端,但无论如何我还是到了这里。

VIEW.aspx

        <div class="col-md-6">
            <div class="form-group">
                <select class="form-control" data-bind="options: EmployeeTypes, optionsText: 'Name', optionsValue: 'EmployeeTypeId', selectedOptions: SelectedEmployeeTypes, multiselect: SelectedEmployeeTypes, disable: isSaving" multiple="multiple"></select>
            </div>
        </div>

VIEWMODEL .ts

 export class ViewModel
{
    EmployeeTypes: KnockoutObservableArray<EmployeeType> = ko.observableArray([]);
    ...
    async load() {
            var result = null;

            try {
                result = await this.service.get();
            } 
            catch (e) {
            }

            if (result) 
            {
                this.EmployeeTypes().map(result.EmployeeTypes, e => new EmployeeType(e));
            // Desperately tried following
            ////this.EmployeeTypes($.map(result.EmployeeTypes, e => new EmployeeType(e)));
            ////this.EmployeeTypes = ko.mapping.fromJS($.map(result.EmployeeTypes, e => new EmployeeType(e)))
            ////this.EmployeeTypes.push(ko.mapping.fromJS(result.EmployeeTypes.map(x => new EmployeeType(x))));
            ////this.EmployeeTypes = ko.mapping.toJS(result.EmployeeTypes.map(x => new EmployeeType(x)));
            ////this.EmployeeTypes = ko.unwrap($.map(result.EmployeeTypes, e => new EmployeeType(e)));
            ////this.EmployeeTypes = ko.observableArray([new EmployeeType({ Name: 'TESTNAME2', EmployeeTypeId: '1' })]);
            ////this.EmployeeTypes = ko.unwrap(result.EmployeeTypes.map(x => new EmployeeType(x)));
            }
    }
}

我已经检查过,我的预期对象存在于结果中。EmployeeTypes 另外,当我在控制台中检查“ this.EmployeeTypes”的长度时,我得到了2个对象,正如预期的那样。

结果只是一个空的下拉列表。

如果我在声明时使用EmployeeType初始化kickoutObservableArray,则它在下拉列表中可见。

有什么想法为什么不起作用?

1 个答案:

答案 0 :(得分:0)

.map()创建了一个新数组,好像您使用observableArray将类型从array更改为map()。要在KO中设置值,请使用内部的值作为参数来调用方法,因此我认为您的代码应为

this.EmployeeTypes(result.map(EmployeeTypes, e => new EmployeeType(e)));