bootstrap - выбрать не обновлять динамически в angular - PullRequest
Новая
       19

bootstrap - выбрать не обновлять динамически в angular

1 голос
/ 10 июля 2020

У меня есть выбор (bootstrap -select ) на моей веб-странице, который состоит из некоторых данных, которые будут обновляться в соответствии с некоторым фильтром. Данные привязываются к выбранному через API. 

     <select  appBootstrapSelect  data-live-search="true" [(ngModel)]="mCompany" >
          <option value=''>All</option>
          <option *ngFor="let motherCompany of motherCompanies " [ngValue]="motherCompany.id">                       
           {{motherCompany.name}}
         </option>
     </select>

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

appBootstrapSelect - это Directive и код для него следующий 

import { Directive, ElementRef, OnInit, OnDestroy } from '@angular/core';

declare var jQuery: any;

/**
 * Directive to wrap bootstrap-select
 */
@Directive({
  selector: '[appBootstrapSelect]'
})
export class BootstrapSelectDirective implements OnInit, OnDestroy {

  private el;

  constructor(private elref: ElementRef) {
    this.el = elref.nativeElement;
  }

  ngOnInit() {
   // wrapping in setTimeout to delay init until after attribute binding
    setTimeout(() => {
      jQuery(this.el).selectpicker({
        iconBase: 'fa',
        tickIcon: 'fa-check'
      });
    },2000);

  }

  ngOnDestroy() {
    jQuery(this.el).selectpicker('destroy');
  }

  refresh() {
    jQuery(this.el).selectpicker('refresh');
  }

  /**
   * Manually dispatch a change event to let Angular know of a programmatic change to the select
   */
  triggerChangeEvent() {
    this.el.dispatchEvent(new Event('change', { 'bubbles': true }));
  }

  /**
   * Select an option in this select by id
   * @param id
   */
  selectOptionById(id) {
    jQuery(this.el).find('#'.concat(id)).prop('selected', true);
    this.triggerChangeEvent();
  }
}

Я нашел jQuery код Я думаю, что его нужно вызвать, чтобы список обновился, но не знаю, как это сделать то же в angular. У меня есть ссылка на модель appBootstrapSelect

 @ViewChildren('appBootstrapSelect') motherCompanyDropdown: ElementRef;

Почему это может происходить? Как я могу решить эту проблему?

PS: Я тоже пробовал ChangeDetectionStrategy, но не работает.

1 Ответ

1 голос
/ 13 июля 2020

`Привет,

поскольку у вас уже есть метод refresh в вашей директиве, все, что вам нужно сделать, это вызвать его при обновлении данных параметров. Чтобы вызвать его из компонента, вам необходимо использовать ViewChild, как показано ниже:

Your component.ts 

@ViewChild(BootstrapSelectDirective) motherCompanyDropdown: BootstrapSelectDirective;
//...
update() {
  // new data
  this.motherCompanies = [...];
  // call refresh
  this.motherCompanyDropdown.refresh();
}

Но поскольку вы используете setTimeout, он может не работать без добавления setTimeout в ваш refresh метод:

Ваша директива.ts 

refresh() {
  setTimeout(() => {
    jQuery(this.el).selectpicker('refresh');
  })
}
...