使用解析数据的 Ionic 3 搜索过滤器

Question

我正在尝试实现一个基于城市名称搜索用户输入的搜索栏。 在我的 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>

Answer 1

因此，理想情况下，您还应该共享您的 cityService 提供程序代码，因为它可能具有从共享代码中看不到的额外上下文。

现在使用您共享的代码，我发现了 3 个问题：

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 代码应该有分离： - 在构造函数的初始化过程中，您将数据分配给两个变量（城市和城市总数），但是根据用户操作，您应该只将更改应用于变量“城市”。

第二个问题是您缺少用户重置搜索的逻辑。搜索栏见official doc 有一个特殊的监听器：(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>

尝试解决所有三个问题，如果您遇到困难，请告诉我。