이오닉 2 검색 바

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 요청 finishs는 이미 배열을 필터링 한 후 있다는 생각, 이렇게하면 필터링 한 후에 catalogList에서 구문 분석 된 JSON을받을 수 있습니다. 따라서 이것이 재설정되는 이유입니다.

검색 창에 ser 유형이있을 때마다 서버에서 카탈로그를 가져와야합니까? 카탈로그가 역동적입니까? 당신이 정말로 당신의 카탈로그를 얻을 수 있도록 API 매번 전화를해야하는 경우

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); 
     }) 
    } 
    } 

단지와 함께 작동 : 당신은 단순히 사용자가 페이지를 입력 할 때 catalogList에 저장하고 다른 개체를 만들 수 있습니다하지 않으면 필터에 사용되는 약속은

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); 
     }) 
     } 
    }); 
    } 

희망이 있습니다.