Фильтр поиска Ionic 3 с использованием данных разбора - PullRequest
Новая
       29

Фильтр поиска Ionic 3 с использованием данных разбора

0 голосов
/ 20 октября 2018

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

Вот мой HTML-код: 

<ion-searchbar (ionInput)="searchCities($event)"></ion-searchbar>

Вот мой .ts-код, где citiesTotal - это переменная, которая содержитмассив, содержащий данные из Parse о городах: 

searchCities(event) {

    var val = event.target.value;

    if (val && val.trim() != '') {
      this.citiesTotal= this.citiesTotal.filter((city) => {
        console.log(city.name);
        return (city.name.toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }
}

Моя строка журнала консоли успешно получает названия городов, как только я нажимаю на панели поиска.Однако сама панель поиска не фильтрует названия городов.

[ОБНОВЛЕНИЕ]

Я подумал, что добавлю еще код, чтобы решить эту проблему,как предложено @SergeyRudenko ...

Это мой код .ts, и он включает в себя код, из которого я извлекаю данные из файла моего провайдера.CityServ - это файл моего провайдера. 

constructor (private cityService: CityServ) {

    //this successfully retrieves the data I need
    if (this.cityService.all().length == 0) {
      this.cityService.getCities().then((success) => {
        this.cities = this.cityServ.all();
        this.citiesTotal = this.cities;
      }).catch((error) => {
        console.log('Error!');
      });
    } else {
      this.cities = this.cityService.all();
      this.citiesTotal = this.cities;
    }
}

searchCities(event) {

    var val = event.target.value;

    if (val && val.trim() != '') {
      this.citiesTotal= this.citiesTotal.filter((city) => {
        console.log(city.name);
        return (city.name.toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }
}

И это соответствующий код в моем файле .html: 

<ion-searchbar (ionInput)="searchCities($event)"></ion-searchbar>
<ion-list>
    <ion-item *ngFor="let item of items">
        {{city.name}}
    </ion-item>
</ion-list>

1 Ответ

0 голосов
/ 22 октября 2018

так что в идеале вы также должны поделиться кодом своего провайдера cityService, так как он может иметь дополнительный контекст, который не виден из общего кода.

Теперь с кодом, которым вы поделились, я обнаружил 3 проблемы:

1-ая конкретная проблема в методе searchCities - в частности, в этой строке: 

this.citiesTotal= this.citiesTotal.filter((city) => {...}

Обычно каждый раз, когда пользователь вводит в поле поиска, вы присваиваете this.citiesTotal его отфильтрованному подмножеству.Хотя в идеале вы должны хранить то, что вы отображаете для пользователя, как результат поиска, а исходный список городов должен быть отделен.

Попробуйте это: 

searchCities(event) {

    var val = event.target.value;

    if (val && val.trim() != '') {
      // here assign to "cities" instead of "citiesTotal":
      this.cities = this.citiesTotal.filter((city) => {
        return (city.name.toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }
}

Теперь ваш код ts должен иметь разделение: - во время инициализациив конструкторе вы присваиваете данные обеим переменным (towns и townsTotal), но затем, основываясь на действиях пользователя, вы должны применять изменения только к переменным «city».

Во-вторых, вам не хватает логики при сбросе пользователем настроек поиска.См. официальный документ , для панели поиска есть специальный слушатель для этого: (ionCancel) = "onCancel ($ event)".В вашем коде TS вы должны иметь что-то вроде этого для сброса: 

resetSearch(event) {
    this.cities = this.citiesTotal;
}

И затем в вашем шаблоне вам нужно будет добавить (ionCancel) = "resetSearch ($ event)".

Третья проблема, которую я вижу в вашем шаблоне, заключается в том, что ваша привязка не указывает на правильные элементы: 

<ion-searchbar showCancelButton="true" (ionInput)="searchCities($event) (ionCancel)="resetSearch($event)"></ion-searchbar>
<ion-list>
    // here ensure your ngFor is pointing to the right var:
    <ion-item *ngFor="let city of cities">
        {{city.name}}
    </ion-item>
</ion-list>

Попробуйте исправить все три проблемы и дайте мне знать, если вы с этим боретесь.

...