Javascript ObservableArray中的第一个数组项

我正在尝试使用knockoutJS填充级联select2下拉列表。 在使用静态数据（如函数staticbuildData）时，代码似乎工作正常，但在使用函数buildData时抛出错误

第一个下拉列表正确填充数据。但是，在第一个下拉列表中选择一个项目时，会引发以下错误：

未捕获的TypeError:无法读取null的属性“childOptions”

结果是，以下行无法找到子选项并返回null：

 var make = ko.utils.arrayFirst(viewModel.togaMakers,function(item)

我唯一能想到的是staticbuildData返回一个数组，而buildData返回一个observableArray，因此找不到正确的子选项

我走对了吗？或者有人知道为什么会发生这种情况吗

击倒

构建数据

静态构建数据

---

您正在使用异步数据。buildData函数将首先返回一个空的可观察数组，然后添加数据

但是，计算的togaLevel将在以下情况下进行计算：

它首先被实例化 选定的级别更改 togaMakers变化 这意味着您将在selectedLevel为true且togaMakers仍然为空时收到错误。计算出的值将求值，它将尝试在返回null的空数组中查找第一个值，然后尝试获取null.childOptions

快速修复方法是将return语句更改为：

return type ? type.childOptions : null;

---

这会通过返回null使计算处理空数组。

我可以看到您的html吗，或者最好是JSFIDLE。感谢@user3297291澄清并帮助我理解这个问题。我将研究异步相关观测。

function buildData() {
  var dataContainer = ko.observableArray([]);

  getData().then(function(newData) {
    parsed = JSON.parse(newData);
    processed = processData(parsed);
    dataContainer(processed);
  });

  return dataContainer;
};

function staticbuildData(){
    var uomBachelor = new cascadingOption({
        text: 'Bachelor Degree',
        childOptions : [
            new cascadingOption({
                text: 'Faculty of Enviroment'
            }),
            new cascadingOption({
                text: 'Faculty of Education'
            })
        ]
    });

    var uomMaster = new cascadingOption({
        text: 'Master Degree',
        childOptions : [
            new cascadingOption({
                text: 'Faculty of Law'
            }),
            new cascadingOption({
                text: 'Faculty of Dental & Surgery'
            })
        ]
    });

    var uom = new cascadingOption({
        text: 'University 1',
        childOptions : [uomBachelor, uomMaster]
    });

    var mdx = new cascadingOption({
        text: 'University 2',
        childOptions : [
            new cascadingOption({
                text:'Bachelor Degree',
                childOptions : [
                    {text: 'Q5'},
                    {text: 'Q7'}
                ]
            }),
            new cascadingOption({
                text:'Master Degree',
                childOptions : [
                    {text: 'A3'},
                    {text: 'A4'},
                    {text: 'A6'}
                ]
            })
        ]
    });
    return [uom, mdx];
}

return type ? type.childOptions : null;