Question

我正在学习angular 4，并且动手创建了自动完成应用程序。

<form novalidate [formGroup] ="formG">
<input type="text" formGroupName="formCont" id="searText" class="searchBox">
</form>
<div class="seracDropDown" *ngIf = "showDropDown">
<div class="dropDownContent" *ngFor="let obj of arr" (click)="setVal(obj)">
    {{obj}}
</div>
</div>

逻辑代码是：

import {Component,HostListener, ElementRef,ViewChild} from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import {AppObjComponent} from './app.obj'
@Component({
 selector : "app-root",
 templateUrl : './app.component.html',
styleUrls : ['./app.component.css']
})

export class AppComponent{
@ViewChild('searText') textVal; 
objApp : any;
arr :any;
arr1 = [];
constructor(private _el:ElementRef,private appObj : AppObjComponent)
{
this.objApp = this.appObj.obj;
}  
showDropDown : boolean = false;

formG = new FormGroup({
formCont : new FormControl()
})

@HostListener('document:click',['$event.target'])
onClickCalled(target){
if(target.id =="searText")
{
 this.showDropDown = true;
 }
 else
 {
 console.log("I am here");
 this.showDropDown = false;
 }
 }

 @HostListener("keyup",['$event'])
 onKeyUp(ev)
 {
  var str :string; 
  let i =0;
  if(ev.target.id=="searText")
  {
  str = ev.target.value;
  this.arr = this.funcArray(str);
  console.log(this.arr[i]);
  i++;
  }
  }

  funcArray(str:string) : any
  {
  let i=0;
  let arr =[];
  let arr1 =[];
  this.objApp.forEach(element => {
   console.log(element);
   if(element.toLowerCase().startsWith(str.toLowerCase()))
   {
  console.log("hello");
  arr[i]=element;
  i++;
  return arr;
  }
  else{
  return arr1;
  }
 });
 }

setVal(obj){
console.log(obj);
 this.textVal.nativeElement.value = obj;
}
}

现在我面临两个问题，在下拉菜单中，当我单击任何值时，文本应会显示出来。 1）我在输入文本上使用viewchild，后来通过setval尝试设置已选择文本的值。抛出：

错误无法读取未定义的属性。

2）在keyup hostlistener中，我将输入的字符发送到funcArray函数，并将这些字符与foreach的值的开头进行比较。字符串类型。如果匹配则返回数组，否则返回空数组。但这也会引发错误：

无法读取属性0。

任何人都可以帮忙吗？

Answer 1

1）我在输入文本上使用viewchild，后来通过setval我正在尝试设置已选择的文本的值。它的抛出错误无法读取未定义的属性

您应该使用模板变量来访问该输入，因此您的代码应如下所示：

<input type="text" formGroupName="formCont" id="searText" class="searchBox" #searText>

2）在keyup主机侦听器中，我将输入的字符发送到 funcArray函数，并将这些字符与开头字符串类型的foreach的值。并返回数组如果匹配，则返回空数组。但它也抛出错误提示无法读取属性0。

您可以将keyup事件直接绑定到输入，例如

<input (keyup)="onKeyUp($event)" type="text" formGroupName="formCont" id="searText" class="searchBox" #searText>

这应该有效

Answer 2

首先，您必须将formGroupName="formCont"更改为formControlName="formCont"，如下所示：

<input type="text" formControlName="formCont" name="searchText" id="searText" class="searchBox">

并按如下所示更改您的setVal()函数：

setVal(obj) {
    this.formG.controls.formCont.setValue(obj);
}

这些步骤将解决您的第一个问题。

要修复第二个问题，您必须先检查this.arr中是否存在值，然后才能像下面这样从中读取值：

  this.arr = this.funcArray(str);
  if (this.arr.length > 0){
      console.log(this.arr[i]);
  }

注意：

根据他们的DOC：

您可以使用ViewChild获取第一个元素或指令匹配视图DOM中的选择器。

如果您需要使用@ViewChild，则可以使用如下所示的模板引用变量：

 <input #searchInput type="text" formControlName="formCont" name="searchText" id="searText" class="searchBox">

然后在组件中像这样使用它：

@ViewChild('searchInput') textVal;

您可以看到此 DEMO

希望这对您有帮助！

自动完成应用程序无法正常工作

2 个答案: