Как бороться с поиском фильтра на Ionic 4 с Firestore?

Question

Я пытаюсь установить фильтр на панели поиска на Ionic 4 с Firestore, у меня много проблем с отображением или скрытием списка панели поиска, я пытаюсь показать список с результатами, только если я что-то пишу или удаляю на панели поиска, но я не знаю, как обращаться со списком, в 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;
            })
    }