将Select2集成到Angular2应用中 [英] Integrate Select2 into the Angular2 app

问题描述

我正在尝试将Select2集成到我正在构建的Angular2应用程序中.我设法使select2运行，并且我的多项选择都按预期进行了转换.我现在的问题是我应该如何获取选定的值以及应该使用哪个事件进行绑定.我尝试在select元素上绑定(change)事件，但没有任何反应.也许我应该在由插件select2-container元素创建的事件上使用其他事件?
在此回答.
有人尝试过类似的混合吗?是否可以使其正常工作，或者我必须切换到 ng2-select 指令?

I'm trying to integrate Select2 into the Angular2 app I'm building. I managed to get select2 running and my multiple selects are transformed as expected. My problem now is how am I supposed to get the selected values and which event should I use for the binding. I tried binding (change) event on the select element but nothing happened. Maybe I should use some other event on the created by the plugin select2-container element?
The select2 plugin is integrated following this answer.
Anybody tried similar mix? Is it possible to get it work or I have to switch to ng2-select directive instead?

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

Update
Bonus question :) - Even if I give up select2 and use standard multiple select, how should I get its value? I tried binding it to a property with [(ngModel)]="_selectedValues" but it remains empty when I select any option. Is the multiple checkbox the only way for multiple choice?

更新2
对于红利问题-我发现的解决方法是使用诸如(change)="selectedValues=$event.target.selectedOptions"之类的单向事件绑定.然后，我为selectedValues属性添加了setter，如下所示:

Update 2
For the bonus question - the workaround I found was to use one way event binding like (change)="selectedValues=$event.target.selectedOptions". Then I added a setter for the selectedValues property like this:

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

推荐答案

我发现的select2唯一可行的解​​决方案是在ngAfterViewInit方法中使用jQuery获取值，如下所示:

The only working solution for the select2 I found, is getting the value with jQuery in the ngAfterViewInit method like this:

jQuery('.fields-select').on(
        'change',
        (e) => this._selectedValues = jQuery(e.target).val()
);

所以我的最终代码如下:

So my final code looks like this:

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

在模板中:

<select id="fields" class="form-control fields-select" multiple="multiple">
    <option *ngFor="#field of _availableFields" [value]="field">{{field}}</option>
</select>

希望这会在某天拯救某人的生命:)

Hope this will save someone's life some day :)

这篇关于将Select2集成到Angular2应用中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！