選擇選項卡越來越循環點擊

Question

我想顯示一個下拉單擊輸入字段上的http請求將被調用到後端和數據顯示在下拉列表中。我已經在以下方式使用angulalr 2和語義UI

<div (click)="searchEmployee()" > 
<select class="ui search dropdown" id="num" > 
<option *ngFor="let data of employeeNameList" value="{{data.num}}"> 
{{data.employeeName}}({{data.num}}) 
</option> 
</div> 

上述實現的問題是，它是怎麼回事下拉的無限循環，如選擇標籤封裝在其中的作用越來越called.Infinite環路在div，如果我點擊輸入按鈕，數據被提取並顯示，如果我點擊數據，下拉菜單再次打開而不是關閉。請幫我解決問題

Answer 1

如果我得到這個權利，你的問題是（點擊）事件處理程序是在周圍的div元素。這意味着任何你點擊的地方（選擇列表或選項列表），你的代碼將被執行。

編輯：

如何移動（點擊）處理這樣的，也是元素內，加少許黑客的事件處理程序，爲了不選擇一個選項時，呼的一下事件。

由於change事件不包含click事件的座標，因此您可以區分這些事件並採取相應的行動。

我想這是一種骯髒的黑客攻擊，我不會在生產環境中使用它，但它是點擊和更改事件的良好起點。

http://plnkr.co/edit/OtVEcH6cBZLoIqtaaha8?p=preview

//our root app component 
import {Component, NgModule, VERSION} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 

@Component({ 
    selector: 'my-app', 
    template: ` 
<div> 
    <select (click)="searchEmployee($event)" (change)="select()"> 
     <option *ngFor="let data of employeeNameList" value="{{data.num}}"> 
     {{data.employeeName}}({{data.num}}) 
     </option> 
    </select> 

</div> 
    `, 
}) 
export class App { 
    name:string; 
    employeeNameList : any[] = []; 
    constructor() { 
    this.name = `Angular! v${VERSION.full}` 
    } 
    searchEmployee(load){ 

    if(load.screenX != 0){ 
     this.employeeNameList = [{employeeName : 'John', num : 1}, {employeeName : 'John2', num : 2}, {employeeName : 'Mary', num : 3}]; 
    } 
    } 
    select(){ 
    //console.log("select"); 
    } 
} 

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

解決方案2 還有另一種解決方案也是，那可以作爲這一點。你在你的select元素上放置一個不可見的div，並在那裏處理加載。

此div根據用戶點擊的位置有條件地添加/刪除DOM。如果用戶點擊select元素，列表被加載，然後div被刪除。 如果用戶點擊一個選項或在包含div之外，覆蓋div再次出現。

https://plnkr.co/edit/tywGQCxXTxZuIZvAXNOW?p=preview

//our root app component 
import {Component, NgModule, VERSION, ViewChild } from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 

@Component({ 
    selector: 'my-app', 
    template: ` 
<div id="cont" style="position: relative; display: table; border : 1px solid red;" (blur)="onBlur()"> 

    <div style="display: table-row;"> 
     <select #sel (change)="select()"> 
     <option *ngFor="let data of employeeNameList" value="{{data.num}}"> 
     {{data.employeeName}}({{data.num}}) 
     </option> 
     </select> 
    </div> 

    <div *ngIf="overlay" (click)="searchEmployee($event)" style="position: absolute; top:0px; left:0px; display: table-row; z-index: 100; width: 100%; height:100%;"></div> 
</div> 
    `, 
}) 
export class App { 
    @ViewChild('sel') sel : any; 
    name:string; 
    employeeNameList : any[] = []; 
    overlay : boolean = true; 
    constructor() { 
    this.name = `Angular! v${VERSION.full}` 
    } 
    searchEmployee(load){ 

    this.employeeNameList = [{employeeName : 'John', num : 1}, {employeeName : 'John2', num : 2}, {employeeName : 'Mary', num : 3}]; 
    this.overlay = false; 
    } 

    onBlur(){ 
    this.overlay = true; 
    } 
    select(){ 
    //console.log("select"); 
    this.overlay = true; 
    } 
} 

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