Intégrer Select2 dans le Angular2 app

Je suis en train d'intégrer Select2 dans le Angular2 application que je suis en train de construire. J'ai réussi à obtenir select2 en cours d'exécution et mes multiples sélectionne sont transformés comme prévu. Mon problème maintenant est de savoir comment je suis censé trouver les valeurs sélectionnées et l'événement qui dois-je utiliser pour la liaison. J'ai essayé de liaison (change) événement sur l'élément select, mais rien ne s'est passé. Je devrais peut-être utiliser un autre événement sur le créé par le plugin select2-container élément?
Le select2 plugin est intégré suivant cette réponse.
Quelqu'un essayait de mélange semblable? Est-il possible de le faire fonctionner ou je dois passer à ng2-sélectionnez directive à la place?

Mise à jour
Question Bonus 🙂 Même si j'abandonne select2 et de l'utilisation standard de la sélection multiple, comment pourrais-je obtenir sa valeur? J'ai essayé de l'attacher à une propriété avec [(ngModel)]="_selectedValues" mais il reste vide lorsque je sélectionne une option. Est les multiples case la seule façon pour un choix multiple?

Mise à jour 2
Pour la question bonus - la solution de contournement que j'ai trouvé est d'utiliser une voie de liaison d'événement comme (change)="selectedValues=$event.target.selectedOptions". Ensuite, j'ai ajouté un setter pour la selectedValues propriété comme cela:

public set selectedValues(value: Array<any>) {
    this._selectedValues.length = 0;
    for(let v of value){
        this._selectedValues.push(v.value);
    }
};
Comme pour ng2-sélectionnez, j'ai de mouillage pour avoir trop immature jusqu'à présent pour utile pour autre chose que la base de cas d'utilisation.

OriginalL'auteur Radoslav Stoyanov | 2016-03-23

  1. 29

    La seule solution de travail pour la select2 j'ai trouvé, c'est d'avoir la valeur avec jQuery dans le ngAfterViewInit méthode comme ceci: 

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

    Donc mon code ressemble à ceci: 

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

    Et dans le modèle: 

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

    Espère que cela permettra de sauver la vie de quelqu'un un jour 🙂

    comment importer les select2 et jquery en même temps? J'ai de la difficulté avec elle
    J'ai juste ajouté dans le point d'entrée de mon appli - dans mon cas, le index.html comme ceci: <script src="node_modules/jquery/dist/jquery.min.js"></script> <script src="node_modules/select2/select2.min.js"></script>
    Merci pour votre réponse. Une idée de comment faire jQuery sélectionnez 2 compatible avec Angulaire http et observables?
    Dans la dernière version de Anguleuses il convient de <option *ngFor="let domaine de _availableFields" [valeur]="champ">{{domaine}}</option>
    Oui, je sais, il y a quelques différences entre les versions de Anguleuses, mais la question et la réponse ont été sur Angular2, qui a utilisé une syntaxe comme celle-ci 🙂 Merci pour le commentaire 😉

    OriginalL'auteur Radoslav Stoyanov

  2. 2

    J'ai fait ma propre mise en œuvre, avec des options, la valeur, et la disposition des éléments en Entrée les paramètres de mon composant. C'est ma première version de celui-ci, il pourrait être très flexible et augmentée assez facilement.

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

    Et vous pouvez l'appeler comme ça 

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

    OriginalL'auteur S.Galarneau