将Select2集成到Angular2应用程序中

Rad*_*nov 11 jquery jquery-select2 typescript angular

我正在尝试集成Select2Angular2我正在构建的应用程序中.我设法select2运行,我的多个选择按预期转换.我现在的问题是如何获取所选值以及我应该使用哪个事件进行绑定.我尝试(change)在select元素上绑定事件但没有发生任何事情.也许我应该使用插件select2-container元素创建的其他事件?
select2插件集成以下这个答案.
有人试过类似的混合?是否有可能让它工作或我必须转而使用ng2-select指令?

更新
奖金问题:) - 即使我放弃select2并使用标准的多重选择,我该如何获得其价值?我尝试将它绑定到属性[(ngModel)]="_selectedValues"但是当我选择任何选项时它仍然是空的.多重复选框是多项选择的唯一方式吗?

更新2
对于奖金问题 - 我发现的解决方法是使用单向事件绑定(change)="selectedValues=$event.target.selectedOptions".然后我添加了一个像这样setterselectedValues属性:

public set selectedValues(value: Array<any>) {
    this._selectedValues.length = 0;
    for(let v of value){
        this._selectedValues.push(v.value);
    }
};
Run Code Online (Sandbox Code Playgroud)

Rad*_*nov 30

select2我找到的唯一可行解决方案是在ngAfterViewInit方法中使用jQuery获取值,如下所示:

jQuery('.fields-select').on(
        'change',
        (e) => this._selectedValues = jQuery(e.target).val()
);
Run Code Online (Sandbox Code Playgroud)

所以我的最终代码如下所示:

import {Component, AfterViewInit} from 'angular2/core';

@Component({
    selector: 'filters',
    templateUrl: 'template.html'
})
export class FiltersComponent implements AfterViewInit {

    private _availableFields: Array<any> = ['Value1', 'Value2', 'Value3','Value4'];
    private _selectedFields: Array<string> = [];

    ngAfterViewInit(){
        jQuery('.fields-select').select2();
        jQuery('.fields-select').on(
            'change',
            (e) => this._selectedFields = jQuery(e.target).val()
        );
    };
}
Run Code Online (Sandbox Code Playgroud)

在模板中:

<select id="fields" class="form-control fields-select" multiple="multiple">
    <option *ngFor="#field of _availableFields" [value]="field">{{field}}</option>
</select>
Run Code Online (Sandbox Code Playgroud)

希望有一天能拯救某人的生命:)