Angular 2語義UI下拉JS不工作

Question

我想創建一個通用的下拉控件在角2，使用語義的用戶界面。我有以下代碼：

import {ElementRef, Component, OnInit, EventEmitter} from "angular2/core"; 
import {DropdownValue} from "./dropdown-value"; 

declare var jQuery: any; 

@Component({ 
selector: 'my-dropdown', 
inputs: ['selectedItem', 'items', 'label'], 
outputs: ['selectedItemChange'], 
template: ` 
<div class="field">   
    <label>{{label}}</label>   
    <select class="ui selection dropdown" [ngModel]="selectedItem.value" (ngModelChange)="onChange($event)"> 
     <!--<option value="" selected>Please Select</option>--> 
     <option *ngFor="#item of items" [value]="item.value">{{item.label}}</option> 
    </select>   
</div>` 
}) 

export class MyDropdownComponent implements OnInit { 

items: DropdownValue[]; 
selectedItem: DropdownValue; 
selectedItemChange: EventEmitter<any> = new EventEmitter(); 

constructor(private elementRef: ElementRef) { 
} 

ngOnInit(): any { 
    this.items.unshift(new DropdownValue('', 'Please Select')); 
    this.selectedItem = this.selectedItem || this.items[0]; 
    //jQuery(this.elementRef.nativeElement).find('select').dropdown(); 
} 

onChange(newValue) { 
    let selectedItem = this.items.find(item => item.value == newValue); 
    this.selectedItemChange.emit(selectedItem); 
} 

} 

其實，這只是正常，因爲它是（無語義UI JS造型），問題是，當我取消對該行//jQuery(this.elementRef.nativeElement).find('select').dropdown();「請選擇」不再可見並沒有顯示最初的選擇。

Answer 1

工作作爲岡特說，你應該在ngAfterViewInit調用jQuery().dropdown()（）。

dropdown()重置所選值。所以你必須dropdown()後重新選擇所需的值：

ngAfterViewInit(){ 
    jQuery(this.elementRef.nativeElement).find('select').dropdown({allowTab:false}); 
    jQuery(this.elementRef.nativeElement).find('select').dropdown("set selected",this.selectedItem.value); 
} 

見plunkr

Answer 2

使用

setTimeout(() => 
    jQuery(this.elementRef.nativeElement).find('select').dropdown(); 
}, 1); 

給角一些空氣呼吸 - 更新視圖來顯示this.items.unshift

或使用ngAfterViewInit()。這樣，它應該不setTimeout()

ngAfterViewInit() { 
    jQuery(this.elementRef.nativeElement).find('select').dropdown(); 
}