Question

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

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

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

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

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

1 个答案: