如何在angular7中的输入点击上隐藏和显示下拉列表？答案

【问题标题】：How can i hide and show drop down list on input click in angular7?如何在angular7中的输入点击上隐藏和显示下拉列表？
【发布时间】：2019-11-23 11:50:20
【问题描述】：

我有一个angular7 应用程序，其中有一个dropdown，当我从下拉列表中选择任何项目时，dropdown 关闭。但我也关闭并打开input 上的下拉菜单，点击切换。就像我点击输入然后dropdown 应该打开，当我再次点击input 所以dropdown 应该关闭。在这里我创建了一个stackblitz 你可以在这里看到我所拥有的实例

我有这样的component.html

records = [];
  selectedName : string = '';
  nameDisplayModel = '';
  users = [
    {name : 'Fahad', value :'fahad'},
    {name : 'Saad', value :'saad'},
    {name : 'Anus', value :'anus'},
    {name : 'Hazik', value :'hazik'},
    {name : 'Ahsan', value :'ahsan'},
    {name : 'Sohaib', value :'sohaib'}
  ]

  
  credentialsSearchFilter(event: any) {
    const val = event.target.value.toLowerCase();
    this.records = this.users.filter(function(d) {
      return d.name.toLowerCase().indexOf(val) !== -1 || !val;
    });
  }
  hideList(){
    this.records = [];
  }
  getNameValue(row){
      console.log('hello')
      this.nameDisplayModel = row.name;
      this.users.forEach(item=>{
        if(item.name === row.name){
          this.selectedName = row.value;
        }
      })
      this.records = [];
      console.log(this.selectedName)
  }

p {
  font-family: Lato;
}

.custom-list{
  box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12);
}
.autocomplete {
  position: relative;
}
.suggestion-list{
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  list-style-type: none;
  padding: 0;
  box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12);
  background-color:white;
}

li {
  padding: 0.5em;
  line-height: 30px;
}
.wrapper{
  padding: 20px;
}
li:hover{
  background-color:#a560f3;
  cursor : pointer;
  color:white;
}

<div class="wrapper">
	<div class="row mt-3">
		<div class="col-6">
      
			<div class="autocomplete">
				<input type="text" class="form-control" placeholder="text here" (keyup)="credentialsSearchFilter($event)" (blur)="hideList()" [(ngModel)]="nameDisplayModel">
				<ul *ngIf="records.length > 0" class="suggestion-list mt-2">
					<li *ngFor="let record of records" (mousedown)="getNameValue(record)">{{record.name}}</li>
				</ul>
			</div>

		</div>
	</div>
</div>

【问题讨论】：

标签： javascript angular typescript

【解决方案1】：

StackBlitz Link is 的工作示例和 ...

像这样在你的输入中添加 click toggle () 事件...

<input type="text" class="form-control" placeholder="text here" (keyup)="credentialsSearchFilter($event)" (blur)="hideList()" [(ngModel)]="nameDisplayModel" (click)="toggle($event)">

然后，在你的 toggle() 中是...

toggle(event: any){
  this.toggleBool === false ? this.toggleBool=true: this.toggleBool=false;
  this.toggleBool ? this.credentialsSearchFilter(event) :this.hideList() ;
}

并且默认的 toggleBool 设置为 false 作为属性...

  toggleBool =false;

【讨论】：