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

【问题标题】：Dynamically created selects don't bind to their observable values?动态创建的选择不绑定到它们的可观察值？
【发布时间】：2019-03-08 13:59:30
【问题描述】：

我像这样在淘汰赛中动态创建选择：

<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>

在我的模型中，我希望动态创建的选择值绑定到 observableArray：

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

但是，即使选择的实际创建就像魅力一样，它们似乎也总是 0。这里的问题是我实际上并不想按原样在选择框中发布内容，后端要求我将其发布为 CSV 字符串。我所做的是创建一个订阅方法，该方法将相应地更新selectedChildrenAgesCsv：

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

我的控制台日志从不在这里输出任何东西，我有点不知如何面对它。我尝试了很多不同的方法，但似乎没有任何效果。

【问题讨论】：

标签： javascript typescript knockout.js knockout-3.0

【解决方案1】：

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

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

或者在订阅处理函数中使用 newValue 作为参数：

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(",");
});

【讨论】：