bootstrap multiselect получает значение с помощью Angular 2

Я хочу получить значение выбранных параметров в раскрывающемся списке с множественным выбором. Но я не могу сделать это ngModel..

Здесь html:

 <div class="col-xs-offset-1 col-xs-3">
    <form class="btn-group" id="select-form">
        <select id="dropdown-list" multiple="multiple" [(ngModel)]="selectedObject"></select>
       <button type="reset" id="reset-button" class="btn btn-default"><span class="glyphicon glyphicon-refresh"></span></button>
    </form>
</div>

и здесь цикл for, который добавляет параметры к выбору:

ngOnInit() {
    for(var i = 0; i < this.checks.length; i++){
        var append = this.checks[i];
        $('#dropdown-list').append('<option>'+ append.name +'</option>');
    }

Это потому, что ngFor здесь не работает... но в данном случае это не мой вопрос.

Может ли кто-нибудь помочь мне зарегистрировать выбранный options = [(ngModel)]="selectObject"


angular twitter-bootstrap bootstrap-multiselect
person Sireini    schedule 18.03.2016    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Множественный выбор пока не поддерживается, см. https://github.com/angular/angular/issues/4427.

Вот обходной путь (который не использует селекторы запросов):

@Component({
  selector: 'my-app',
  template: `{{title}}<p>
  <select multiple="multiple" (change)="change($event.target.options)">
    <option *ngFor="#item of items">{{item}}</option>
  </select>
  <p>{{selectedOptions | json}}`
})
export class AppComponent {
  title = "Angular 2 beta - multi select list";
  items = 'one two three'.split(' ');
  constructor() { console.clear(); }
  change(options) {
    this.selectedOptions = Array.apply(null,options)  // convert to real array
      .filter(option => option.selected)
      .map(option => option.value)
  }
}

Плункер

person Mark Rajcok    schedule 18.03.2016
comment
это не работает для меня .. точно так же, как ngFor для опций тоже не работает. Я опубликую в следующем комментарии мой код для лучшего просмотра - person Sireini; 18.03.2016
comment
‹div class=col-xs-offset-1 col-xs-3› ‹form class=btn-group id=select-form› ‹select id=dropdown-list Multiple=multiple (change)=onChange($event.target .options)›‹/select› ‹тип кнопки=reset id=reset-button class=btn btn-default›‹span class=glyphicon glyphicon-refresh›‹/span›‹/button› ‹/form› ‹/div› ‹p›{{selectedOptions | json}} - person Sireini; 18.03.2016
comment
onChange(options) { console.log('chekc'); this.selectedOptions = Array.apply(null,options) .filter(option =› option.selected) .map(option =› option.value); console.log(this.selectedOptions); } - person Sireini; 18.03.2016
comment
метод onChange не запускается, как вы можете видеть, я проверил его с помощью журнала - person Sireini; 18.03.2016
comment
@Beginnerprogrammer, используемая вами библиотека начальной загрузки, вероятно, добавляет/регистрирует свой собственный обработчик событий onchange, который заменяет обработчик Angular. Посмотрите, есть ли способ добавить свою собственную логику в их обработчик. - person Mark Rajcok; 18.03.2016
comment
Хм, но в любом другом компоненте он работает, может быть, вы знаете, почему ngFor не показывает никаких результатов? - person Sireini; 18.03.2016
comment
@Beginnerprogrammer, я не знаю. Можете ли вы создать плункер? - person Mark Rajcok; 18.03.2016
comment
хм, мне это не удалось, но я думаю, что вижу проблему. Потому что я установил изменение для выбора, но в этом нет никаких изменений, потому что он находится в раскрывающемся меню множественного выбора. - person Sireini; 18.03.2016
comment
Все это работает, когда я не использую плагин multiselect. - person Sireini; 18.03.2016
comment
вам удалось решить эту проблему с включенным мультиселектором начальной загрузки? - person Timson; 28.07.2016