Angular 2语义UI下拉JS无法正常工作

发布时间：2020-12-17 07:09:42 所属栏目：安全来源：网络整理

导读：我正在尝试使用语义UI在Angular 2中创建通用下拉控件.我有以下代码： import {ElementRef,Component,OnInit,EventEmitter} from "angular2/core";import {DropdownValue} from "./dropdown-value";declare var jQuery: any;@Component({selector: 'my-dropdo

我正在尝试使用语义UI在Angular 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);
}

}

这实际上工作得很好(没有Semantic UI JS样式),问题是,只要我取消注释//jQuery(this.elementRef.nativeElement)行.find(‘select’).dropdown(); “请选择”不再可见,并且不显示初始选择.

解决方法

正如Günter所说,你应该在ngAfterViewInit()中调用jQuery().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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!