이오닉 2 - 무한 스크롤에서 필터 검색

Question

데이터베이스 용 PouchDB를 사용하고 있으며 이미 내 프로젝트에서 무한 스크롤을 구현하고 있습니다. 첫 번째로드의 경우 40 개의 문서 만 표시되고 다음 스크롤의 경우 40 개의 문서가로드됩니다. 내 데이터베이스의 전체 문서는 약 3000 문서입니다. 무한 스크롤을 할 때 문제가 없지만 무한 스크롤을 사용하여 필터 데이터에 문제가 있습니다. 이미 표시/조회 된 데이터는 검색 할 수 있지만 표시되지 않은 데이터는 검색 할 수 없습니다. 이미로드 된 데이터 만 필터링 할 수 있습니다. 아래는 제 코드입니다.

providers.ts

constructor(public http: Http) { 


this.db = new PouchDB('location'); 
console.log('Hello User Provider',this.db); 
this.remote = 'http://data/location'; 

let options = { 
    live: true, 
    retry: true 
}; 

this.db.sync(this.remote, options) 
    .on('change', function(change){ 
    console.log('Users provider change!', change); 
    }) 
    .on('paused', function(info){ 
    console.log('Users provider paused!', info); 
    }) 
    .on('active', function(info){ 
    console.log('Users provider active!', info); 
    }) 
    .on('error', function(err){ 
    console.log('users provider error!', err) 
    }); 

} 

getUsers(skip,limit){ 

var total; 

return new Promise(resolve => { 

    this.db.info().then(function (info) { 

    total = info.doc_count; 
    }) 


    this.db.allDocs({ 
    include_docs: true, 
    descending:true, 
    limit: limit, 
    skip:skip 
    }) 
    .then((result) => { 
    this.data = []; 

     result.rows.map((row) => { 
     if(row.doc._id.substring(0,8) !== '_design/'){ 
      this.data.push(row.doc); 
     } 
     }) 


    resolve(this.data); 

    this.db.changes({live: true, since: 'now', include_docs: true}) 
    .on('change', (change) => { 
     this.handleChange(change); 
    }) 

    }) 
    .catch((error) => { 

    console.log('Error when getUsers!', error); 

    }) 

}) 

} 

home.html을

<ion-content class="sample-modal-page"> 
    <ion-searchbar (ionInput)="getItems($event)"> 
    </ion-searchbar> 
    <ion-item *ngFor = "let user of users (click)="dismiss(user.Description)"> 
    <h3>{{user.Description}}</h3> 
    <h4>{{user.code}}</h4> 
    <h4>{{user.branch}}</h4> 
    </ion-item> 

    <ion-infinite-scroll (ionInfinite)="doInfinite($event)"> 
    <ion-infinite-scroll-content 
     loadingSpinner="bubbles" 
     loadingText="Loading more data..."> 
    </ion-infinite-scroll-content> 
    </ion-infinite-scroll> 

home.ts

코드에서

users: any = []; 
staff: any = []; 
searchQuery: string = ''; 

skip : any = 0; 
limit : any = 40; 

constructor(public user: User,public loadingCtrl: LoadingController, public viewCtrl: ViewController, public navCtrl: NavController, public navParams: NavParams) 
{ 
    let loadingPopup = this.loadingCtrl.create({ 
    content: 'Loading data...' 
    }); 

    loadingPopup.present(); 

    //get data from user provider 
    this.user.getUsers(this.skip,this.limit).then(data => { 

    this.staff = data; 

    this.initializeItems(); 

    loadingPopup.dismiss(); 
    }); 
} 

initializeItems() { 

    this.users = this.staff; 
} 

getItems(ev) { 

    this.initializeItems(); 

    var val = ev.target.value; 

    if (val && val.trim() != '') { 
    this.users = this.users.filter((user) => { 

     return (user.Description.toLowerCase().indexOf(val.toLowerCase()) > -1); 
    }) 
    } 
} 

doInfinite(infiniteScroll){ 

    setTimeout(() => { 

    this.skip = this.skip + this.limit; 

    this.user.getUsers(this.skip,this.limit).then((data) => { 

     for (var i = 0; i < this.limit; i++) { 
     this.users.push(data[i]); 
     console.log('Apa ini sebenarnya',this.users); 
     } 

    }); 

    console.log('Sync end'); 
    infiniteScroll.complete(); 
    },250); 
} 

Answer 1

, 당신은 건너 뛰고 한계 보내기 추가 매개 변수로 쿼리를 호출 . 즉, 쿼리 당 데이터 만 40 개 데이터를 얻게됩니다.

1. 당신은 당신이 모든 데이터를 얻을 당신이 고수 할 경우보다 것은 클라이언트 측 (필터, 페이징)

2. 에서이를 조작 할 필요 (예 : 데이터 테이블로) 클라이언트 측에서 필터링하려면 당신의 방법 (쿼리 함수에 한계를 보내고 매개 변수를 건너 뛰기), 필터를 보내고 매개 변수를 0으로 제한하고 재설정해야합니다.