将Select2集成到Angular2应用程序中

Question

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

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

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

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

Answer 1

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

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

所以我的最终代码如下：

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>

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

Answer 2

我已经自己实现了它，选项，值和可用项目作为我的组件的输入参数。这是我的第一个版本，它可以非常灵活并且非常容易扩充。

import { Component, ElementRef, Input, Output, AfterViewInit, EventEmitter, ViewChild } from '@angular/core';
declare var $: any;

@Component({
    selector: 'custom-select',
    template: `<select #select class="form-control"></select>`
})

export class CustomSelectComponent implements AfterViewInit {
    @ViewChild('select') private select: ElementRef;
    @Input() items: any[];
    @Input() options: any = {};
    @Input() value: any;
    @Output() valueChange = new EventEmitter<string[]>();

    constructor() { }

    ngAfterViewInit() {
        let selectElement = $(this.select.nativeElement);

        if (this.isMultiple()) {
            selectElement.attr('multiple', true);
        }

        selectElement.select2({
            data: $.map(this.items, (obj: any) => {
                let item = {
                    id: this.options.identifier ?  obj[this.options.identifier] : obj.id,
                    text: this.options.name ? obj[this.options.name] : obj.name
                };

                if ($.trim(item.id) === '') { console.warn(`No 'id' value has been set for :`, obj); }
                if ($.trim(item.text) === '') { console.warn(`No 'name' value has been set for :`, obj); }

                return item;
            })
        });
        $(selectElement).val(this.value).trigger('change');

        selectElement.on('change', (e: any) => {
            this.valueChange.emit($(e.target).val());
        });

    };

    private isMultiple() {
        return !!(this.options && this.options.multiple === true);
    }
}

你可以这样称呼它

<custom-select [items]="array" [options]="{multiple:true}" (valueChange)="update($event)" [value]="valueVar"></custom-select>