Question

我实现了一个搜索栏，它按照我想要的方式过滤，但是在2秒后，它再次显示整个数组，我真的不明白为什么。

感谢您的帮助。

这是.ts

  getCatalog() {
    this.http.get('url', {}, {}).then(data => {
      console.log("Data:", JSON.parse(data.data));
      this.catalogList = JSON.parse(data.data);

      // console.log(data.status);
      // console.log(data.data); // data received by server
      // console.log(data.headers);

    })
      .catch(error => {

        console.log(error.status);
        console.log(error.error); // error message as string
        console.log(error.headers);

      });
  }




  getItems(ev: any) {
    // Reset items back to all of the items

    this.getCatalog();
    // set val to the value of the searchbar
    let val = ev.target.value;
    //console.log("VALUE", ev);

    // if the value is an empty string don't filter the items
    if (val && val.trim() != '') {
      this.catalogList = this.catalogList.filter((item) => {
        console.log("ITEM", item)
        return (item.name.toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }
  }

这是我有* ngFor

的地方

   <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
    <ion-grid>
      <ion-row *ngFor="let item of catalogList">
Other code here

Answer 1

我认为问题在于，在您已经过滤了数组之后，您的HTTP请求就完成了，这将使catalogList在您过滤后接收解析后的JSON，这就是重置的原因。

每次ser在搜索栏中输入内容时，您是否真的需要从服务器获取目录？你的目录是动态的吗？如果不是，您只需在用户进入页面时将其保存在catalogList中，并创建另一个要在过滤器中使用的对象：

public catalogListFiltered: any[] = []; // CREATE A NEW VARIABLE THAT'LL BE USED ON YOUR NGFOR

  ionViewDidEnter() { // or ionViewDidLoad, depends on what lifecycle you need
    this.http.get('url', {}, {}).then(data => {
      this.catalogList = JSON.parse(data.data);
      this.initializeCatalogs();
    });
  }

  // THIS'LL SET YOUR FILTERED ARRAY TO THE FIRST/FULL VERSION OF YOUR CATALOG
  initializeCatalogs(){
    this.catalogListFiltered = this.catalogList;
  }


  getItems(ev: any) {
    // Reset items back to all of the items

    this.initializeCatalogs();
    // set val to the value of the searchbar
    let val = ev.target.value;
    //console.log("VALUE", ev);

    // if the value is an empty string don't filter the items
    if (val && val.trim() != '') {
      this.catalogList = this.catalogList.filter((item) => {
        console.log("ITEM", item)
        return (item.name.toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }
  }

如果您确实需要每次都调用您的API以使您的目录与promises一起使用

  getCatalog = (): Promise<any> {
    return new Promise<any>(resolve => {
      this.http.get('url', {}, {}).then(data => {
        resolve(JSON.parse(data.data));
      });
    });
  }

  // maybe this'll have the same effect as the above, maybe someone can say if that'll work with some changes on your 'getItem' method:
  // getCatalog(){ return this.http.get('url', {}, {}); };

  getItems(ev: any) {
    // Reset items back to all of the items

    this.getCatalog().then(res => {
      this.catalogList = res;
      // set val to the value of the searchbar
      let val = ev.target.value;
      //console.log("VALUE", ev);

      // if the value is an empty string don't filter the items
      if (val && val.trim() != '') {
        this.catalogList = this.catalogList.filter((item) => {
          return (item.name.toLowerCase().indexOf(val.toLowerCase()) > -1);
        })
      }
    });
  }

希望这有帮助。

Ionic 2搜索栏

1 个答案: