извлечение выбранной опции из select2 в smartadmin - PullRequest
Новая
       63

извлечение выбранной опции из select2 в smartadmin

0 голосов
/ 04 октября 2018

Я использую smartadmin угловой шаблон.В одной форме я использую select2, которая уже присутствует в качестве директивы в smartadmin. 

import {Directive, ElementRef, OnInit} from '@angular/core';
import {addClassName, removeClassName} from '../../../utils/dom-helpers';

declare var $: any;

@Directive({
  selector: '[select2]'
})
export class Select2Directive implements OnInit {

  constructor(private el: ElementRef) {
    addClassName(this.el.nativeElement, ['sa-cloak', 'sa-hidden'])
  }

  ngOnInit() {
    System.import('script-loader!select2/dist/js/select2.min.js').then(() => {
      $(this.el.nativeElement).select2()
      removeClassName(this.el.nativeElement, ['sa-hidden'])
    })
  }

}

Я использую это в своем шаблоне компонента и добавляю данные в опции select2 после полученияданные с сервера. 

<select select2 style="width:100%;" class="select2" [(ngModel)]="selectedContractDetails.name">
    <option *ngFor="let symbol of service.symbols" value="{{symbol}}">{{symbol}}</option>
</select>

Теперь, как получить значение опции, которую я выбираю из select2.Я пытался использовать привязку [(ngModel)] и (click) в шаблоне компонента, но у меня это не сработало.

Ответы [ 2 ]

0 голосов
/ 17 октября 2018

Вы также можете сделать это с помощью JQuery, просто добавив Id для выбора тега 

 <select select2 style="width:100%;" class="select2" id="symbolId" [(ngModel)]="selectedContractDetails.name">
        <option *ngFor="let symbol of service.symbols" value="{{symbol}}">{{symbol}}</option>
    </select>

В вашем ngAfterViewInit() 

ngAfterViewInit(){
   $('#symbolId').on('change', (event) => {
       var symbolSelected= event.target.value;
       //you can use the selected value
   });
}
0 голосов
/ 17 октября 2018

для этого вы должны использовать ngAfterViewInit метод жизненного цикла, потому что select2 в smartadmin является директивой, которую они определили.Для привязок событий и других методов вы должны объявить его внутри ngAfterViewInit.Код должен быть похож на 

ngAfterViewInit(){
   $('.select2').on('select2:select', (event) => {
       // Code you want to execute when you hit enter in select2 input box   
   });
}
...