Question

我试图获取在搜索字段中输入的输入值，并将其记录在控制台中。我该如何实现？请有人指导我。我正在使用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);
  }

Answer 1

您可以通过多种方式进行操作。

您可以通过在模板上命名输入并将其值传递到typescript方法参数中来将值从模板传递给您的方法：

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)">

打字稿：

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

您可以使用ngModel将您的typescript属性绑定到模板输入。阅读官方文档：https://angular.io/api/forms/NgModel

编辑：我添加了一个简短示例：https://stackblitz.com/edit/angular-input-example-cvpkkq

Angular官方文档中确实有您需要的东西：https://angular.io/guide/user-input#key-event-filtering-with-keyenter

如何从搜索字段获取输入值

1 个答案: