आयनिक 2 (खोज-बार) में ऑटो-पूर्ण कैसे करें

Question

मैं अपने खोज बार में एक ऑटो पूर्ण करने की कोशिश कर रहा हूं जो मैंने अभी तक किया है।

मेरे पास कुछ तारों के साथ एक सरणी है। और फिर मैं अपने सामानों में सूचीबद्ध करने की कोशिश कर रहा हूं, मैं कणिका वस्तु को खोजने में सक्षम हूं।

लेकिन मेरी आवश्यकता सूची में वस्तुओं को प्रदर्शित नहीं करना है। मुझे खोज बार पर क्लिक करना है, सरणी में सभी तार आना चाहिए और मुझे एक खोज करना है।

<ion-header> 

    <ion-navbar> 
    <ion-title>search</ion-title> 
    </ion-navbar> 
    <ion-toolbar primary > 
    <ion-searchbar (ionInput)="getItems($event)" autocorrect="off"></ion-searchbar> 
    </ion-toolbar> 

</ion-header> 


<ion-content padding> 

<ion-list> 
    <ion-item *ngFor="let item of items"> 
    {{ item }} 
    </ion-item> 
</ion-list> 

</ion-content> 

search.ts फ़ाइल के लिए कोड:

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 

/* 
    Generated class for the SearchPage page. 

    See http://ionicframework.com/docs/v2/components/#navigation for more info on 
    Ionic pages and navigation. 
*/ 
@Component({ 
    templateUrl: 'build/pages/search/search.html', 
}) 
export class SearchPage { 
private searchQuery: string = ''; 
    private items: string[]; 

    constructor(private navCtrl: NavController) { 
    this.initializeItems(); 
    } 

    initializeItems() { 
    this.items = [ 
     'Amsterdam', 
     'Bogota', 
    ] 
    } 

    getItems(ev: any) { 
    // Reset items back to all of the items 
    this.initializeItems(); 

    // set val to the value of the searchbar 
    let 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.toLowerCase().indexOf(val.toLowerCase()) > -1); 
     }) 
    } 
    } 
} 

प्रश्न:

कैसे ऑटो आयनिक 2.

में पूरा के माध्यम से एक सरणी के मूल्य प्राप्त करने के

Answer 1

इसे प्राप्त करने के लिए, आपको बस इसकी आवश्यकता है अपने कोड में एक छोटी सी चीज जोड़ें। कृपया this plunker पर एक नज़र डालें।

जैसा कि आप वहां देख सकते हैं, showList परिवर्तनीय के साथ हम उपयोगकर्ता को कुछ खोजने के बाद ही परिणाम दिखा सकते हैं।

<ion-list *ngIf="showList"> 
    <ion-item *ngFor="let item of items"> 
     {{ item }} 
    </ion-item> 
    </ion-list> 

हम पहले constructor में false है कि चर सेट और फिर हम यह true करने के लिए सेट getItems(...) विधि के अंदर।