Question

我正在学习Angular 4并创建自动完成应用程序

HTML：

 <form novalidate [formGroup] ="formG">
 <input type="text" formGroupName="formCont" id="searText" class="searchBox">
 </form>
 <div class="seracDropDown" *ngIf = "showDropDown">
 </div>

AppComponent：

import { Component, HostListener, ElementRef } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: "app-root",
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  constructor(private _el: ElementRef)
  { }
  showDropDown: boolean = false;
  formG = new FormGroup({
    formCont: new FormControl()
  })

  @HostListener('click', ['$event.target'])
  onClickCalled(target) {
    if (target.id == "searText") {
      this.showDropDown = true;
    }
    else {
      this.showDropDown = false;
    }
  }

  @HostListener("keyup", ['$event'])
  onKeyUp(ev) {
    var str: string;
    if (ev.target.id == "searText") {
      str = this._el.nativeElement.value;
      console.log(str);
    }
  }
}

因此，如果在textbox中单击，将出现dropdown，它将在文档上的任意位置单击。点击hostlistener和keyup hostlistener处理的是textbox中输入的值，现在我面临两个问题。

1）在单击textbox时显示，但在其他任何地方单击时都没有关闭。

2）在文本框中输入任何值console.log(str);时，将打印undefined。

任何帮助将不胜感激

Answer 1

使用data:mimeType;base64,<Base64 string>代替click并使用document:click代替ev.target.value。

按以下方式使用它们：

this._el.nativeElement.value

WORKING DEMO

希望这对您有帮助！

Hostlistener提供错误的nativeelement.value值和click事件

1 个答案: