筛选与输入相匹配的列表项目

问题描述：

我在获取元素的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; 
}

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

请告诉我们你写的功能 - 我们为了回答有关它的任何问题都需要这个。 – moopet

public f（t：HTMLElement）：boolean { return t.textContent.indexOf（this.searchInput）！== -1; } – flaviumanica

答

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

尝试定义您的函数作为箭头的功能，这将保持“周边” this即

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

该函数在* ngIf中。正如我在原帖中所写的，我有几个，我希望他们的可见性根据搜索输入而改变。这就是为什么我考虑写在HTML ，并且f函数返回true或false。问题是函数的地址是未定义的（也就是说，我需要的内容的离子项没有正确传递给函数） – flaviumanica

啊是的，我没有完全阅读这篇文章。我也不使用离子，也不使用Angular。无论如何，你是否试过将函数定义为上面的箭头函数，以便在里面，'this'是你的类的实例（而不是调用元素）？ –

是的，我做过了，这是一样的。问题不在于函数内的“this”，而是在HTML中使用“this”。看起来像HTML对象不存在或什么的。如果我将所有内容都放入单击事件中，并将该事件作为参数发送并获取源代码，则它可以工作。但我不希望它等待点击... – flaviumanica