ui-select Ersatz in Angular2

Question

Wir verschieben unser vorhandenes angular1-Projekt nach angular2 und möchten die bestehende Komponente ui-select ersetzen.

Ich habe gegoogelt, aber konnte die ui-select Version für angular2 nicht finden.

Hat jemand eine bessere Alternative gefunden?

Answer 1

ng2-select würde etwas davon tun. Die dynamische Datenbindung wird jedoch noch nicht unterstützt.

Tatsächlich sind fast alle von Drittanbietern implementierten Plugins für angular nicht für angular2 implementiert.

Answer 2

PrimeNG Drop-down oder Multiselect kann helfen.

http://www.primefaces.org/primeng/#/dropdown

oder

http://www.primefaces.org/primeng/#/multiselect

Answer 3

Für für Angular 2 entwickelten Komponenten speziell finden Sie in der DropDowns package von Kendo UI für Angular 2. Es ist noch in der Beta und das Feedback ist willkommen.

Answer 4

Wenn jemand nach ng2 migriert und eine Hybridanwendung (mit ng1 und ng2 - jetzt AngularJS und Angular) ausführen muss, können ng1 UI-Widgets, die nicht mit ng1-Komponenten erstellt wurden Wählen Sie) zur Verwendung in ng2-Komponentenvorlagen. Wir haben das erfolgreich mit ui-select gemacht und es funktioniert großartig. Sehen Sie sich insbesondere die @Directive Annotationsbindung an.

import {Directive, ElementRef, Injector, Input} from '@angular/core'; 
 
import {UpgradeComponent} from '@angular/upgrade/static'; 
 
import {module, IComponentOptions} from 'angular'; 
 

 
class UiSelectComponent implements IComponentOptions { 
 

 
    public bindings: any = { 
 
    items: '<', 
 
    model: '<', 
 
    modelProperty: '@', 
 
    placeholder: '@', 
 
    renderProperty: '@', 
 
    selectProperty: '@' 
 
    }; 
 
    public template = ` 
 
    <ui-select ng-model="$ctrl.model[$ctrl.modelProperty]" class="form-control input-sm" required> 
 
     <ui-select-match placeholder="{{$ctrl.placeholder}}">{{$select.selected[$ctrl.renderProperty]}}</ui-select-match> 
 
     <ui-select-choices repeat="item[$ctrl.selectProperty] as item in $ctrl.items | filter: $select.search"> 
 
     {{item[$ctrl.renderProperty]}} 
 
     </ui-select-choices> 
 
    </ui-select> 
 
    `; 
 
} 
 

 
const selector = 'uiSelectWrapper'; 
 
export const UI_SELECT_COMPONENT = 'spinnaker.core.widget.uiSelect.component'; 
 
module(UI_SELECT_COMPONENT, []).component(selector, new UiSelectComponent()); 
 

 
@Directive({ 
 
    selector: 'ui-select-wrapper' 
 
}) 
 
export class UiSelectComponentDirective extends UpgradeComponent { 
 

 
    @Input() 
 
    public items: any[]; 
 

 
    @Input() 
 
    public model: any; 
 

 
    @Input() 
 
    public modelProperty: string; 
 

 
    @Input() 
 
    public placeholder: string; 
 

 
    @Input() 
 
    public renderProperty: string; 
 

 
    @Input() 
 
    public selectProperty: string; 
 

 
    constructor(elementRef: ElementRef, injector: Injector) { 
 
    super(selector, elementRef, injector); 
 
    } 
 
}

Answer 5

Haben Sie ngx-select-ex Gabel von ng2-select gesehen. ngx-select-ex hat einzelne Auswahl, Mehrfachauswahl, Auswahl, Blur-Ereignis wie select2. demo of ngx-select-ex