Angular 2 语义 UI 下拉 JS 不工作

Question

我正在尝试在 Angular 2 中使用语义 UI 创建通用下拉控件。我有以下代码：

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(); 行，'Please Select' 就不再可见，但不显示初始选择。

Answer 1

使用

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

给 Angular 一些喘息的机会 - 更新视图以显示 this.items.unshift

或使用ngAfterViewInit()。这样它就可以在没有 setTimeout()

的情况下工作

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

Answer 2

正如 Günter 所说，您应该在 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

Angular 2 语义 UI 下拉 JS 不工作

Angular 2 Semantic UI Dropdown JS not working

semantic-ui

angular