如何从搜索栏中获取输入值

Posted 2023-01-30

我想获取在搜索栏中输入的输入值，并将其记录在控制台中，如何实现？我使用的是Ngx-admin主题，我想从全局搜索选项中获取输入值，并记录在控制台中。我想从全局搜索选项中获取输入值。

html

<i class="control-icon ion ion-ios-search"
       (keyup.enter)="submitSearch()"></i>
    <input placeholder="Type your search request here..."
           #input
           [class.hidden]="!isInputShown"
           (blur)="hideInput()"
           (input)="onInput($event)">

TS

value: string;

submitSearch() 
   console.log(this.value);
  

答案

你可以用很多方法来实现。

你可以通过在模板上命名你的输入，然后把他的值传递到你的typecript方法参数中。

HTML：

<!-- I moved the keyup.enter event from your <i> element to the input -->
<i class="control-icon ion ion-ios-search"></i>
<input #searchInput placeholder="Type your search request here..." [class.hidden]="!isInputShown" (blur)="hideInput()"
    (input)="onInput($event)" (keyup.enter)="submitSearch(searchInput.value)">

Typescript:

submitSearch(value: string) 
    console.log(value);

你也可以使用ngModel将你的typescript属性绑定到模板输入中。请阅读官方文档。https:/angular.ioapiformsNgModel。

EDIT：我添加了一个简短的例子。https:/stackblitz.comeditangular-input-example-cvpkkq。

在Angular官方文档中就有你需要的内容。https:/angular.ioguideuser-input#key-event-filtering-with-keyenter。