Question

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

我做了一个小plunkr以供参考。我正在尝试将两个选择元素（bootstrap和native html）绑定到组件属性

你知道我错过了什么吗？

Answer 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 {}

bootstrap-select不与ngModel绑定

1 个答案: