入力に一致するリストの項目をフィルタする

要素のinnerHTMLを取得する際に問題があります。私はイオン/角度/ Typescriptでプロジェクトを持ち、1ページはいくつかのイオンアイテムを持つイオンリストで構成されています。私も検索ボックスを持っていて、検索入力からの文字列を含むイオンアイテムだけを見たいと思っています。入力に一致するリストの項目をフィルタする

私のような何か試してみました：

<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」が関数内で定義されていないように見えることです。

出典

2016-07-29 flaviumanica

を「囲む」を保持します矢印の関数として、あなたの関数を定義してください私たちにあなたが書いた機能を発揮してください - 私たちはそれについてのご質問にお答えするために、これを必要としています。 – moopet

public f（t：HTMLElement）：ブール値{ 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

ああ、私は完全にポストを読んでいませんでした。また、IonicもAngularも使用しません。とにかく、関数を上の矢印関数として定義しようとしましたが、内部では 'this'はクラスのインスタンスです（呼び出し元の要素ではありません）。 –

はい、私はそうでした、それは同じです。問題は、関数内の "this"ではなく、HTML内の "this"である。 HTMLオブジェクトが存在しないかのように見えます。すべてをクリックイベントに入れて、イベントをパラメータとして送信してソースを取得すると、それは機能します。しかし、私はそれがクリックされるのを待つことを望んでいません... – flaviumanica

入力に一致するリストの項目をフィルタする

答えて

関連する問題