过滤列表中的项目以匹配输入

Question

我在获取元素的innerHTML时遇到问题。 我有一个Ionic / Angular / Typescript项目，一个页面包含一个带有几个离子项的离子列表。我也有一个搜索框，我想只看到包含搜索输入字符串的离子项。

我尝试过类似的事情：

<ion-list>
<ion-item *ngIf="f(this)"> ... 
</ ion-item>
</ ion-list>

并编写了一个函数，该函数将元素作为参数，并检查搜索输入是否与该元素的innerHTML（或textContent）匹配。

public f(t: HTMLElement): boolean {
    return t.textContent.indexOf(this.searchInput) !== -1;
}

这个逻辑的问题是“这个”似乎在函数内部未定义。

Answer 1

我不知道你从哪里调用这个函数，但它很可能来自某个事件处理程序。

尝试将您的函数定义为箭头函数，这将保留“周围”this，即

const f = (t: HTMLElement): boolean  => {
    return t.textContent.indexOf(this.searchInput) !== -1;
}