bootstrap-select 不与 ngModel 绑定答案

【问题标题】：bootstrap-select does not bind with ngModelbootstrap-select 不与 ngModel 绑定
【发布时间】：2018-09-24 10:07:59
【问题描述】：

我正在为我的 Angular 应用程序使用插件 bootstrap-select 插件，当我绑定 <select> 元素时，似乎没有第一次使用 [(ngModel)] 加载

我做了一个小的plunkr 供参考。我正在尝试将两个选择元素（引导程序和本机 html）与组件属性绑定

你知道我错过了什么吗？

【问题讨论】：

标签： angular bootstrap-select

【解决方案1】：

试试这个，

在每次更改时添加超时

//our root app component
import {Component, NgModule, VERSION, ViewChild, OnInit, SimpleChanges, AfterViewInit} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { FormsModule } from "@angular/forms";

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <select #selectInput name="test" [(ngModel)]="state">
      <option *ngFor="let st of states" [value]="st">{{st}}</option>
      </select>

      <select name="test2" [(ngModel)]="state"  (ngModelChange)="change($event)">
      <option *ngFor="let st2 of states" [value]="st2">{{st2}}</option>
      </select>

      {{state}}
    </div>
  `,
})
export class App implements OnInit, AfterViewInit {
  name:string;
  states = ['red', 'yellow', 'blue'];
  state = 'yellow';
  @ViewChild('selectInput') selectInput: ElementRef;
  constructor() {
    this.name = `Angular! v${VERSION.full}`;
  }
  ngOnInit(){

  }
  change(obj: any){
    setTimeout(() => {

       jQuery(this.selectInput.nativeElement).selectpicker('refresh');
    }, 50)
  }
  ngAfterViewInit() {
    setTimeout(() => {

       jQuery(this.selectInput.nativeElement).selectpicker('refresh');
    }, 50)

  }
}

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

【讨论】：