Question

我正在尝试使用Firestore在Ionic 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;
            })
    }

如何使用Firestore处理Ionic 4上的过滤器搜索栏？

1 个答案: