функция поиска не работает

Question

Я создал приложение для онлайн-шоппинга, в котором у меня есть функция поиска в моем проекте. Я перечисляю все заказы, сделанные заказчиком в конкретном магазине. Теперь я хочу предоставить поисковому сотруднику магазина информацию о заказе.но я получил сообщение о проблеме

«Ошибка типа: невозможно прочитать свойство« фильтр »неопределенного» * ​​1004 *

Ниже приведен мой код: .html:

<ion-searchbar [(ngModel)]="terms" (ionInput)="getItems($event)"></ion-searchbar>

.ts:

loadedCountryList: Array<any>;
  countryList: Array<any>;
  countryRef: firebase.database.Reference;

    ionViewDidLoad() {

        this.countryRef = firebase.database().ref('/order_details');
        this.countryRef.on('value', countryList => {
          let countries = [];
          countryList.forEach( country => {
            countries.push(country.val());
            return false;
          });

          this.countryList = countries;
          this.loadedCountryList = countries;
        });
      }
     initializeItems(): void {
        this.countryList = this.loadedCountryList;
      }
        getItems(searchbar) {
          // Reset items back to all of the items

          this.initializeItems();

          // set q to the value of the searchbar
          var q = searchbar.srcElement.value;

          console.log('q =' + q);
          // if the value is an empty string don't filter the items
          if (!q) {
            return;
          }

          this.countryList = this.countryList.filter((v) => {

            if (v.name && q) {
              if (v.name.toLowerCase().indexOf(q.toLowerCase()) > -1) {
                return true;
              }
              return false;
            }
          });

          console.log(q, this.countryList.length);

        }

Answer 1

Хорошо, значит, вы получаете все элементы после загрузки страницы.Это может сработать, но тогда может произойти ошибка, что при вводе данные еще не закончили загрузку.Теперь вы говорите, что это не проблема, но она может стать проблемой позже, поэтому давайте исправим это.

Итак, давайте немного перепишем ваш код.

<ion-searchbar *ngIf="allCountries" [(ngModel)]="terms" (ionInput)="getItems()"></ion-searchbar>
<!-- show a loading paragraph when countries are being fetched -->
<p *ngIf="!allCountries">Loading....</p>

И ваш ts: (переименован loadedCountryList в allCountries Потому что мне понравилось больше)

allCountries: Array<any>;
countryList: Array<any>;
countryRef: firebase.database.Reference;

ionViewDidLoad() {

    this.countryRef = firebase.database().ref('/order_details');
    this.countryRef.on('value', countryList => {
      let countries = [];
      countryList.forEach( country => {
        countries.push(country.val());
        return false;
      });

      this.countryList = countries;
      this.allCountries = countries;
    });
  }

 getItems() {
    // also check for no input
    if (!this.terms || this.terms == '') {
      // if no term is entered you might want to reset the search
      this.countryList = this.allCountries;
      return;
    }
    // allCountries isn't edited by the filter function so you can use that one
    this.countryList = this.allCountries.filter((v) => {
      if (v.name) {
        if (v.name.toLowerCase().indexOf(this.terms.toLowerCase()) > -1) {
          return true;
        }
        return false;
      }
    });
  }

А потом покажите свой countryList где-то:)