过滤列表项以匹配输入答案

【问题标题】：Filter items of a list to match an input过滤列表项以匹配输入
【发布时间】：2016-12-04 03:18:23
【问题描述】：

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

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

【问题讨论】：

请向我们展示您编写的函数 - 我们需要它来回答有关它的任何问题。
public f(t: HTMLElement): boolean { return t.textContent.indexOf(this.searchInput) !== -1; }

【解决方案1】：

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

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

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

【讨论】：

该函数在 *ngIf 中。正如我在原始帖子中所写，我有几个，我希望它们的可见性根据搜索输入而改变。这就是为什么我考虑用 HTML ... 编写并且 f 函数返回 true 或 false 的原因。问题是函数的参数未定义（即我需要的内容没有正确传递给函数的离子项）
啊，是的，我没有完全阅读这篇文章。此外，我既不使用 Ionic，也不使用 Angular。无论如何，您是否尝试过将函数定义为上面的箭头函数，以便在内部，this 是您的类的实例（而不是调用元素）？
是的，我做到了，它是一样的。问题不在于函数内部的“this”，而在于 HTML 中的“this”。看起来 HTML 对象不存在之类的。如果我将所有内容都放在点击事件中并将事件作为参数发送并获取源，它就可以工作。但我不希望它等待被点击...