离子不过滤中的简单搜索栏

Question

所以基本上，我有一个过滤位置的Web应用程序。我的代码运行没有错误，但为什么没有过滤？已经调试了几个小时，但我似乎无法弄清楚错误，请帮助我。

这是我在家里的代码.html

 <ion-header>
  <ion-navbar>
<ion-title>
  Ionic Blank
  </ion-title>
 </ion-navbar>
 </ion-header>
<ion-content padding>
 <ion-searchbar (ionIput)="getTopics($event)"></ion-searchbar> 
<ion-list>
    <ion-item *ngFor="let topic of topics">
    {{ topic }}
</ion-item>
 </ion-list>
</ion-content>

这是 Home.ts 中的代码

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController) {
    this.generateTopics();
 }
topics: string[];
    generateTopics(){
this.topics = [
'Dumaguete city',
'bacong february 1 2018',
'Dumaguete february 2 2018',
'Sibulan february 3 2018',
'bacong february 4 2018',
'ajong february 5 2018',
'dauin february 6 2018',
'zamboanguita february 7 2018',
];
}

    getTopics(ev: any) {
this.generateTopics();
let serVal = ev.target.value;
if( serVal && serVal.trim() != ''){
    this.topics == this.topics.filter((topic) =>{
        return (topic.toLowerCase().indexOf(serVal.toLowerCase()) > -1);
    })
 }
}
}   

Answer 1

您使用的是比较运算符而不是赋值运算符。使用这个

getTopics(ev: any) {
    this.generateTopics();
    let serVal = ev.target.value;
    if (serVal && serVal.trim() != '') {
      this.topics = this.topics.filter((topic) => { //here you used == instead of =
        return (topic.toLowerCase().indexOf(serVal.toLowerCase()) > -1);
      })
    }
  }

Answer 2

您需要将结果分配回变量，而不是比较。您也可以将文件管理器简化为

this.topics = this.topics.filter(t=>t.toLowerCase().indexOf(serVal.toLowerCase()) > -1);