篩選與輸入相匹配的列表項目

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

2016-07-29 13:11:14

該函數在* ngIf中。正如我在原帖中所寫的，我有幾個，我希望他們的可見性根據搜索輸入而改變。這就是爲什麼我考慮寫在HTML ，並且f函數返回true或false。問題是函數的地址是未定義的（也就是說，我需要的內容的離子項沒有正確傳遞給函數） – flaviumanica

啊是的，我沒有完全閱讀這篇文章。我也不使用離子，也不使用Angular。無論如何，你是否試過將函數定義爲上面的箭頭函數，以便在裏面，'this'是你的類的實例（而不是調用元素）？ –

是的，我做過了，這是一樣的。問題不在於函數內的「this」，而是在HTML中使用「this」。看起來像HTML對象不存在或什麼的。如果我將所有內容都放入單擊事件中，並將該事件作爲參數發送並獲取源代碼，則它可以工作。但我不希望它等待點擊... – flaviumanica

回答