敲除可观察数组到下拉列表答案

【问题标题】：Knockout observable array to dropdown敲除可观察数组到下拉列表
【发布时间】：2019-05-21 03:13:00
【问题描述】：

根据淘汰文档，这应该可以工作，但我仍然面临一个空的下拉列表。我的技能主要不是在前端，但我还是到了这里。

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)));
            }
    }
}

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

结果只是一个空的下拉菜单。

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

任何想法为什么这不起作用？

【问题讨论】：

.map 创建了一个新数组，看起来您使用map 将类型从observableArray 更改为array。要在 KO 中设置值，您可以将值放在方法调用中，所以我认为您的代码应该是 this.EmployeeTypes(result.map(EmployeeTypes, e => new EmployeeType(e)));
嗨，埃里克，感谢您的评论。你是对的，但我也尝试了多种方式来调用该方法。我什至尝试 .unwrap 数组。
试试this.EmployeeTypes(result.EmployeeTypes.map(e => new EmployeeType(e))
另外，您的data-bind 中的multiselect 是什么？这是自定义绑定吗？
以这种方式使用 .map 时出现此错误：Uncaught (in promise) TypeError: result.map is not a function multiselect 是一个自定义组件，但是当我初始化手动具有多个值的数组，我会正确地看到值。多选可以检查和取消选中多个值。

标签： typescript knockout.js

【解决方案1】：

.map() 创建了一个新数组，看起来您使用map() 将类型从observableArray 更改为array。要在 KO 中设置值，您可以使用里面的值作为参数调用方法，所以我认为您的代码应该是

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

【讨论】：