如何获取输入值搜索框并使用Enter键将其输入到AngularJS组件中？

为了在AngularJS中实现搜索组件，该组件将在用户每次按下Enter键(keyCode = 13)并随后从用户输入中执行一些相关任务时调用该函数。使用keyup事件可以轻松实现这一点。

在这里，出于样式目的，正在使用引导程序和超棒的字体。

我们需要一个基本的输入标签，该标签具有一个keyup事件，该事件将调用onSubmit($ event)函数并将事件作为参数传递。 $ event为我们提供了不同类型的属性，但是我们将借助keyCode来告诉我们用户按下了哪个键。我们使用的键码检查用户是否按下其代码是13，一旦按下回车键，你想，你可以执行的任务，例如从列表中搜索或通过搜素到另一个组件Enter键。为简单起见，我们创建了一个小数组，该数组检查数组中的search元素并输出结果。

例子：

app.component.html

  

    

    

      
Programming Languages
      

        
      
        
      

      
      
        
         Searching your results for
        {{prevText}}
      
      
        
{{res_cnt}} Search Result Found
          
            {{lang}}, 
        
      
    
  

---

app.component.css

.searchBox{
   margin: 20px 0;
}
   
input{
   width: 100%; 
   padding: 10px; 
   text-align: center;
}

app.component.ts

import { Component } from '@angular/core';
import { AbstractControl, FormBuilder, 
    FormGroup } from '@angular/forms';
  
@Component({
  selector: 'app-root',
  template: './app.component.html',
  styles: ['./app.component.css']
})
export class AppComponent {
  
  searchValue: string = null;
  condition: boolean = null;
  prevText: string = '';
  list_lang = ['java', 'c++', 'python', 'c', 'javascript'];
  res_list = [];
  res_cnt: number = 0;
    
  onSubmit($event){
    if($event.keyCode === 13){
      this.condition = true;
      this.prevText = this.searchValue;
      this.res_cnt = 0;
      this.res_list = [];
      setTimeout(() => {
        this.condition = false;
        for(let i=0; i

输出