如何使用Firestore在离子4上处理过滤器搜索栏

Question

我正在尝试在带有firestore的离子4上设置搜索栏，我有很多问题显示或隐藏搜索栏的列表，我正在尝试使用结果，如果我在搜索栏上编写或删除了某些内容，但我不知道如何处理列表，在HTML上，我已经设置了" Isresult = false"。

export class Tab1Page {
    private objCollection: AngularFirestoreCollection
    objs: Observable<any>
    listTitles: any[]
    title
    selectedTitle
    isResult: boolean = false;
    constructor(private af: AngularFirestore,
        private db: AngularFireDatabase,
        private service: objService) {
        this.loadListobjs()
    }
    ngOnInit() {
    }
    filter(event) {
        this.initializeListSearch();
        const search = event.target.value
        if (search && search.trim() != '') {
            console.log(this.listTitles)
            this.listTitles = this.listTitles.filter(title => {
                return title.toLowerCase().indexOf(search.toLowerCase()) > -1;
            })
        } else {
            this.isResult = false
            this.loadListobjs();
        }
    }
    initializeListSearch() {
        const getAllTitles = []
        firebase.firestore().collection("objs")
            .get()
            .then(function (querySnapshot) {
                querySnapshot.forEach(function (doc) {
                    getAllTitles.push(doc.data().title)
                });
            }).catch(function (error) {
                console.log("Error getting documents: ", error);
            });
        this.listTitles = getAllTitles
    }
    selectTitle(title) {
        this.selectedTitle = title;
        this.isResult = true
        if (this.isResult == true) {
            this.objs = null
            this.objs = this.af.collection('objs',
                ref => ref.where("title", "==", this.selectedTitle))
                .valueChanges(data => {
                    return data;
                })
        }
    }
    loadListobjs() {
        this.objCollection = this.af.collection('objs',
            ref => ref.orderBy('myorder', 'desc'));
        this.objs = this.objCollection
            .snapshotChanges().pipe(
                map(actions => actions.map(a => {
                    const data = a.payload.doc.data();
                    const id = a.payload.doc.id;
                    return { id, ...data };
                }))
            );
    }
}

Answer 1

最终解决，希望它可以帮助人们：

html

<ion-searchbar type="text" debounce="500" animated placeholder="Filter your objects" [value]="selectedTitle" clearInput (ionChange)="filter($event)"></ion-searchbar>
<ion-list class="max-height-scroll">
    <ion-item *ngFor="let title of listTitles" (click)="selectTitle(title)">
        <ion-label>{{ title.title }}</ion-label>
    </ion-item>
</ion-list>

ts

export class Tab1Page {
    private objectCollection: AngularFirestoreCollection
    objects: Observable<any>
    listTitles: any[]
    listTitlesAux: any[]
    title
    selectedTitle
    constructor(private af: AngularFirestore,
        private db: AngularFireDatabase,
        private service: ObjectService) {}
    ngOnInit() {
        this.loadListObjects()
    }
    filter(event) {
        const search = event.target.value
        console.log('entra en filtro')
        //this.listTitlesAux = []
        if (search && search.trim() != '') {
            console.log('entra en filtro y en el search if')
            this.initializeListSearch();
            console.log(this.listTitles)
            this.listTitles = this.listTitlesAux.filter(title => {
                return title.title.toLowerCase().indexOf(search.toLowerCase()) > -1;
            });
        } else {
            this.loadListObjects();
        }
    }
    initializeListSearch() {
        this.af.collection('objects').valueChanges().subscribe(data => {
            this.listTitlesAux = data
        })
        /*
        var getAllTitles = []
        firebase.firestore().collection("objects")
            .get()
            .then(function (querySnapshot) {
                querySnapshot.forEach(function (doc) {
                    getAllTitles.push(doc.data().title)
                });
            }).catch(function (error) {
                console.log("Error getting documents: ", error);
            });
        this.listTitles = getAllTitles
        */
    }
    selectTitle(title) {
        this.listTitles = null
        this.listTitlesAux = null
        this.selectedTitle = title.title;
        this.objects = null
        this.objects = this.af.collection('objects',
            ref => ref.where("title", "==", this.selectedTitle))
            .valueChanges(data => {
                return data;
            })
    }