Question

我正在尝试显示一个下拉列表，在点击输入字段时，http请求将被调用到后端，数据显示在下拉列表中。我已使用angulalr 2和语义ui以下列方式实现了这个/ p>

<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>

上面实现的问题在于它正在进行无限循环的下拉，因为select函数被包含在div中，其中函数被调用。如果我单击输入按钮，则无限循环，获取并显示数据，如果我点击数据，下拉列表会再次打开而不是关闭。请帮我解决问题

Answer 1

如果我做对了，你的问题是（click）事件处理程序在周围的div元素上。这意味着您点击的任何地方（选择或选项列表），您的代码将被执行。

修改：

如何在这样的元素内移动（click）处理程序，并在事件处理程序中添加一点hack，以便在选择选项时不调用click事件。

由于更改事件不包含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，并在那里处理加载。

根据用户点击的位置，有条件地从DOM中添加/删除此div。如果用户单击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 {}

选择标签圈点击

1 个答案: