模糊事件无法按预期的方式在角度中的自定义自动完成功能下运行

Question

我在我的角度应用程序中创建了一个自定义自动完成搜索栏。我尝试调用模糊事件方法，以使用户在列表外部单击后搜索建议列表消失。但这只有在我先单击列表中的一个建议然后在列表外部单击时才起作用。 >

下面是代码：

html

<div class="col-md-6 col-sm ">

      <div class=" input-group mb-3 ">
        <input #searchBox [formControl]="queryField" type="text" class="form-control" (focus)="OnFocus(searchBox.value)"
          placeholder="Type any location" aria-label="locationName" aria-describedby="button-addon2" required>

        <div class="input-group-append">
          <button class="btn btn-outline-light btn-success" type="button" id="button-addon2">

            <i class="fa fa-search" aria-hidden="true"></i>

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

      <div *ngIf="displayList" tabindex="-1" (blur)="OnBlur()">
        <ul class="list-group typeAhead" *ngIf="locations.length>0">
          <li *ngFor="let location of locations" class="list-group-item">
            {{location.title}}
          </li>
        </ul>
      </div>

    </div>

组件ts文件

  OnBlur(){
    this.displayList = false;
  }

  OnFocus(value){
    if(value.length>1){
       this.displayList = true;
    }
    else{
      this.displayList = false;
    }
  }

我尝试了聚焦事件，但结果相同。