Select2をAngular2アプリに組み込む

Question

私が構築しているAngular2アプリにSelect2を統合しようとしています。私はselect2を走らせることができたし、私の複数の選択は期待どおりに変換される。今私の問題は、選択した値を取得する方法と、バインドにどのイベントを使用するのかです。私は選択要素にバインドした(change)イベントを試みましたが、何も起こりませんでした。たぶん私は、プラグインselect2-container要素が作成した上で、いくつかの他のイベントを使用する必要がありますか？
select2プラグインはthis答え、次の統合されています。
誰もが同様のミックスを試してみましたか？それを働かせることは可能ですか、代わりにng2-selectディレクティブに切り替える必要がありますか？

更新
ボーナス質問:) - 私はselect2を放棄し、選択標準の複数を使用している場合でも、どのように私は、その値を取得する必要がありますか？私は[(ngModel)]="_selectedValues"とプロパティにバインドしようとしましたが、任意のオプションを選択すると空のままです。複数のチェックボックスは複数選択の唯一の方法ですか？

ボーナス質問のアップデート2
- 私が見つけた問題を回避するには、片道イベントが(change)="selectedValues=$event.target.selectedOptions"のようなバインディングを使用することでした。そして、私はこのようなselectedValuesプロパティのsetterを追加しました：

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

テンプレートでのD：

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

希望これは私がオプション、値、および私ののparamsの入力として使用可能なアイテムで、それを私の独自の実装を作った:)

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

そして、あなたはNG2選択についてはその

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