2017-02-17 7 views
1

角2のデータを持つ配列をtypescriptでフィルター処理する方法を検討しています。フィルタリングはIonic 2の検索バー用です。テンプレートのリストがデータを取得して表示されますが、フィルタリングは機能しません。角度2の文字コードで配列をフィルターにかける

initializeItems(i:number) { 
this.http.get('https://maps.googleapis.com/maps/api/place/details/json?placeid='+this.placeid+'&key=AIzaSyBPi-ayuvkTht4wddCcvcy0l2wIBdT9P2w').map(res => res.json()).subscribe(data => { 
    this.locations[i]._detail = data.result; 

    this.names.push([ 
    { 
     name: this.locations[i]._detail.name, 
     adress: this.locations[i]._detail.formatted_address, 
     phone: this.locations[i]._detail.formatted_phone_number 
    } 
    ]); 

    this.items = this.names; 
    console.log(this.items); 
}); 
} 

getItems(ev) { 
    this.items = this.names; 
    console.log(this.items); 
    // set val to the value of the ev target 
    var val = ev.target.value; 

    // if the value is an empty string don't filter the items 
    if (val && val.trim() != '') { 
    this.items = this.items.filter((item) => { 
     return (item.name.toLowerCase().indexOf(val.toLowerCase()) > -1); 
    }) 
    } 
} 

私はこのエラーを取得する検索バーに入力します。

enter image description here

+0

ユーザitem.name'は、文字列を指す 'と仮定されています。あなたはどうしているのですか? – Leon

+0

item.nameは文字列ですが、フィルタにアクセスする方法はありませんか? – Mohammed

+0

'val'を' let'で宣言できますか?つまり 'let val = ev.target.value; ' – AngularChef

答えて

0

私はあなたがpush間違っを適用していると思います。オブジェクトを別の配列ではなく配列にプッシュします。あなたは複数の名前がspreadオペレータ

this.names.push(
    { 
     name: this.locations[i]._detail.name, 
     adress: this.locations[i]._detail.formatted_address, 
     phone: this.locations[i]._detail.formatted_phone_number 
    } 
); 
+0

スプレッド演算子はどのように使用しますか?私は角2とタイプスクリプトには新しいです。 – Mohammed

+0

あなたは上記の変更を試しましたか?それはうまくいくはずです。スプレッドオペレータを理解するための – raj

+0

このドキュメントをチェックアウトしてください。これにより、配列のすべての要素を別の配列 '' array.push(... anotherArray) ''にプッシュすることができます。そのJSオペレータ。 https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Spread_operator – raj

2

を使用している場合、私は解決策を見つけました。

  • がorginames = [0] return文で
  • がorginamesに配列を変更し、項目を設定追加、これはあなたの場合、配列は空にしないことが保証さ

    1. は、オブジェクト内の文字列の中に鍵を変更しました単語を削除してください。

    initializeItems(i:number) { 
    this.http.get('https://maps.googleapis.com/maps/api/place/details/json?placeid='+this.placeid+'&key=AIzaSyBPi-ayuvkTht4wddCcvcy0l2wIBdT9P2w').map(res => res.json()).subscribe(data => { 
        this.locations[i]._detail = data.result; 
    
    
        this.orginames.push([ 
        { 
         "name": this.locations[i]._detail.name, 
         "adress": this.locations[i]._detail.formatted_address, 
         "phone": this.locations[i]._detail.formatted_phone_number 
        } 
        ]); 
    
        this.items = this.orginames; 
        // this.orginames.push(this.locations[i]._detail.name); 
    
    }); 
    console.log(this.items); 
    
    } 
    
    getItems(ev) { 
        this.items = this.orginames; 
        //console.log(this.items); 
        // set val to the value of the ev target 
        var val = ev.target.value; 
    
        // if the value is an empty string don't filter the items 
        if (val && val.trim() != '') { 
        this.items = this.items.filter((item) => { 
         return (item[0].name.toLowerCase().indexOf(val.toLowerCase()) > -1); 
        }) 
        } 
    } 
    
  • 関連する問題