动态创建的 mutl select html 元素的 Angular2 数据绑定

Question

我在将多选 html 元素绑定到 ngModel 时遇到问题。当我提交表单时，我从多个选定的标签中只得到一个选定的标签。我需要一种方法来绑定所有选定的值并在提交表单时返回这些值

我已经尝试了以下场景

1)

<select multiple ([ngModel])="multiSelect1" ngControl="multiSelect1" (change)="multiSelect1=setSelected($event)">
                            <option value="1" id="1">Value1</option>
                            <option value="2" id="2">Value2</option>
                            <option value="3" id="3">Value3</option>
                            <option value="4" id="4">Value4</option>
                        </select>

setSelected($event): String{
    console.log($event.target.selectedOptions);
    let  values = [].slice.call($event.target.selectedOptions).map(a => a.value);

    return values.toString();
}

在上面的代码中，即使更改事件被触发，multiSelect1 也没有得到更新。我在提交表单时得到输出为 2

2) 在这里我没有使用任何更改仍然获得相同的输出。仅显示所选标签的第一个选项

<select multiple ([ngModel])="multiSelect1" ngControl="multiSelect1">
                            <option value="1" id="1">Value1</option>
                            <option value="2" id="2">Value2</option>
                            <option value="3" id="3">Value3</option>
                            <option value="4" id="4">Value4</option>
                        </select>

使用 Angular 版本 2.0.0-beta.15

我想知道 setSelected 是否返回任何值，该值是否会绑定到 ngModel 但它没有被绑定。

我正在寻找一种在提交表单时绑定并获取所有选定选项的方法。

Answer 1

据我所知，angular 2 中还没有多选默认支持，有关解决此问题的方法，请参阅此

https://scotch.io/tutorials/how-to-deal-with-different-form-controls-in-angular-2

Answer 2

您可以使用 prime ng Multiselect 作为具有完整组件的替代品，包括绑定、getter setter 等 在这里你可以看到同样的例子

<p-multiSelect [options]="cities" [(ngModel)]="selectedCities"></p-multiSelect>

http://www.primefaces.org/primeng/#/multiselect