动态创建的选择不绑定到它们的可观察值？

Question

我在这样的淘汰赛中动态创建 selects：

<h5 data-bind="visible: selectedChildren() > 0">@Model.SelectChildrenAge</h5>
  <input type="hidden" name="ac1" data-bind="value: selectedChildrenAgesCsv()"/>
  <div class="children-age-container__ages" data-bind="foreach: childrenAges">
       <select class="children-age-container__ages--select" data-bind="options: $data, optionsCaption: 'Age', value: $parent.selectedChildrenAges[$index]"></select>
   </div>

在我的模型中，我希望将动态创建的 select 值绑定到一个 observableArray：

selectedChildrenAges: KnockoutObservableArray<number> = ko.observableArray([
        0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0
    ]);

然而，即使 select 的实际创建非常有效，它们似乎始终为 0。这里的问题是我实际上不想 post select 框中的内容，后端要求我 post 它作为 CSV 字符串。我所做的是创建一个订阅方法，该方法将相应地更新 selectedChildrenAgesCsv：

this.selectedChildrenAges.subscribe(() => {
            console.log((this.selectedChildrenAges as any).join(", "));
            this.selectedChildrenAgesCsv((this.selectedChildrenAges as any).filter(age => age > 0).join(","));

我的控制台日志从未在此处输出任何内容，我有点不知道如何面对它。我尝试了很多不同的方法，但似乎没有什么效果。

Answer 1

selectedChildrenAges是一个可观察数组。要获取它的内容，您应该使用 ():

this.selectedChildrenAges.subscribe(() => {
            console.log((this.selectedChildrenAges() as any).join(", "));
            this.selectedChildrenAgesCsv((this.selectedChildrenAges() as any).filter(age => age > 0).join(","));
});

或在订阅处理函数中使用作为参数的新值：

this.selectedChildrenAges.subscribe((newValue: Array<number>) => {
            console.log(newValue.join(", "));
            this.selectedChildrenAgesCsv(newValue.filter(age => age > 0).join(","));
});

或者你可以使用计算：

this.selectedChildrenAgesCsv = ko.computed<string>(() => {
    return this.selectedChildrenAges().filter(age => age > 0).join(",");
});

动态创建的选择不绑定到它们的可观察值？

Dynamically created selects don't bind to their observable values?

javascript

knockout.js

typescript

knockout-3.0