自动完成应用程序无法正常工作 [英] Autocomplete application is not working

问题描述

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

I am learning angular 4 , and for hands on I am creating the autocomplete application.

<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 尝试设置已选择文本的值.抛出:

Now I am facing two problems , in the drop down When I click on any value the text should get that. 1) I am using viewchild on the input text and later through setval I am trying to set the value of the text which has been selected. It's throwing:

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

error cannot read undefined property .

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

2) In the keyup hostlistener I am sending the entered characters to the funcArray function and compare those characters with the starting of the values of foreach which is of string type. And return the array if it matches otherwise returns empty array. But it is also throwing error saying:

无法读取属性0.

can not read property of 0.

任何人都可以帮忙吗?

推荐答案

首先，您必须将 formGroupName ="formCont" 更改为 formControlName ="formCont" 并查看像这样:

First you have to change the formGroupName="formCont" to formControlName="formCont" and look like this:

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

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

And change your setVal() function like below:

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

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

These steps will fix your first problem.

要修复第二个问题，必须先检查 this.arr 中的值是否存在，然后再从中读取值，如下所示:

To fix second one you have to check if values are exist in this.arr before you are going to read value from it like below:

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

---

注意:

根据他们的 DOC :

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

You can use ViewChild to get the first element or the directive matching the selector from the view DOM.

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

If you need to use @ViewChild you could use template reference variable like below:

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

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

Then in component use it like this:

@ViewChild('searchInput') textVal;

您可能会看到此

You could see this DEMO

希望这对您有帮助！

这篇关于自动完成应用程序无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！