如何在离子搜索栏中获取用户输入的文本答案

【问题标题】：How to get the text input by user in ion searchbar如何在离子搜索栏中获取用户输入的文本
【发布时间】：2020-09-04 07:59:40
【问题描述】：

我正在创建一个应用程序，我想获取用户在按 Enter 后输入到搜索栏中的文本并将该值分配给一个变量。我遇到的所有示例都只显示列表过滤，我仍然卡住了。我正在尝试在一行代码上执行此操作。

<ion-searchbar placeholder="Search" type="text" id="term" ></ion-searchbar>

【问题讨论】：

【解决方案1】：

假设搜索组件是你自己的组件，不是外部库提供的。

您可以拥有一个 keydown 事件侦听器并将事件作为参数传递给您的 html 中的函数。在该功能中检查按下的键并与您要检查的键匹配。

【讨论】：

【解决方案2】：

没什么可做的，试试吧

<ion-searchbar [(ngModel)]="searchTerm" (ionInput)="searchEventFired()"></ion-searchbar>

要使用enter，您需要这样做：

<ion-searchbar [(ngModel)]="searchTerm" (keydown.enter)="searchEventFired()"></ion-searchbar>

或

<ion-searchbar [(ngModel)]="searchTerm" (search)="searchEventFired()"></ion-searchbar>

在component.ts

中


searchTerm = '';

constructor(){}

searchEventFired() {
  // you have the value here
  console.log(this.searchTerm)
}

【讨论】：

在 VScode 中，我被告知未定义 searchTerm，因此我将 'searchTerm' 设置为字符串，它现在可以工作，但即使用户没有按 Enter 键，它也会继续保存文本。 @Shashank Vivek
起初上面的代码对我不起作用，所以我用(keydown.enter)="searchInput()" 替换了(search)，现在它可以正常工作了。
@DreadedHippy：感谢您的编辑。但我可以用 search 运行它，你可以查看演示代码。可能有一些版本不匹配。无论如何我认为它可以标记为答案
@DreadedHippy 我个人更喜欢另一种选择。然后你可以订阅FormControl上的变化： this.searchControl.valueChanges.pipe(...