bootstrap-select 未在 angular 中动态更新

Question

我的网页中有一个 select (bootstrap-select)，其中包含一些将根据某些过滤器更新的数据。数据通过 API.

绑定到 select

     <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 期间填充到 select 中，这工作正常。但是当我尝试通过更改模型通过代码更新 select 的 options 时，它似乎没有反映。我注意到的一件事是，如果我删除属性 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 code 我认为需要调用它来更新列表，但不确定如何在 angular 中执行相同的操作。我确实有 appBootstrapSelect

的模型参考

 @ViewChildren('appBootstrapSelect') motherCompanyDropdown: ElementRef;

为什么会这样？我该如何解决这个问题？

PS：我也试过ChangeDetectionStrategy但是不行。

Answer 1

`你好，

因为你的指令中已经有了 refresh 方法，你需要做的就是在更新选项数据时调用它。要从您需要使用 ViewChild 的组件调用它，如下所示：

你的component.ts

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

但是由于您使用了 setTimeout，如果不在您的 refresh 方法中也添加 setTimeout，它可能无法工作：

你的directive.ts

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

bootstrap-select 未在 angular 中动态更新

bootstrap-select not updating dynamically in angular

bootstrap-4

angular

angular6