Typescript 离子2-无限卷轴中的过滤器搜索
我正在使用PockDB作为数据库，我已经在我的项目中实现了无限滚动。对于第一次加载，仅显示40个文档，对于下一次滚动，将再加载40个文档。我数据库中的文档总数约为3000个文档。我做无限滚动没有问题，但我用无限滚动过滤数据有问题。我可以搜索已显示/查看的数据，但无法搜索未查看的数据。它只能过滤已经加载的数据。下面是我的代码 提供者Typescript 离子2-无限卷轴中的过滤器搜索,typescript,ionic2,infinite-scroll,pouchdb,searchbar,Typescript,Ionic2,Infinite Scroll,Pouchdb,Searchbar,我正在使用PockDB作为数据库，我已经在我的项目中实现了无限滚动。对于第一次加载，仅显示40个文档，对于下一次滚动，将再加载40个文档。我数据库中的文档总数约为3000个文档。我做无限滚动没有问题，但我用无限滚动过滤数据有问题。我可以搜索已显示/查看的数据，但无法搜索未查看的数据。它只能过滤已经加载的数据。下面是我的代码 提供者 constructor(public http: Http) { this.db = new PouchDB('location'); console.log('
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);
})
})
}
<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>
从您的代码中，您可以通过发送额外的参数（skip和limit）来调用query。这意味着每个查询只能获得40个数据
若要在客户端进行筛选（如数据表），则需要获取所有数据，然后在客户端对其进行操作（筛选、分页）
若要坚持自己的方式（将限制和跳过参数发送到查询函数），则必须同时发送筛选器，然后将限制和跳过参数重置为0
我最近也遇到了同样的问题，我将从一开始就解释解决方案
离子2和离子3具有相同的程序
1。无限滚动
使用Ionic docs呈现列表非常简单：
2。搜索栏
同样，按照Ionic文档配置搜索栏：
3。管道
最好使用管道来过滤元素，您将能够在两个位置、模板和控制器中使用它，并在其他组件中重用它
对于不需要无限卷轴的小列表，我将其直接放在模板中：
<ion-list>
<button *ngFor="let item of items | search : searchbarValue:searchbarFilters">
我的真实案例
在我的情况下，this.items
包含2.000个值，因此我无法渲染它们，因此我使用无限滚动仅渲染过滤后的元素
我粘贴自己的代码，向您展示它的整体外观
template.html
控制器
dynamicofset:number=0；
dynamicLimit：数字=30；
偏移量：数字=0；
限值：数量=30；
/**
*当在搜索栏中放置一些新值时，将调用此函数。
*我有两个阵列：
*-具有2.000个值的原始列表（此项）
*-筛选列表为空（this.filteredItems）
*/
onSearch（）：void{
//每次搜索时，我都会重置筛选列表
this.filteredItems.length=0；
//我将通过参数传递的管道称为原始项列表，
//searchbarValue和要查找的属性。
//我收到过滤后的项目。
让filteredItems=new SearchPipe（）.transform（this.items，this.searchbarValue，this.searchbarFilters）；
//我重置了无限滚动的限制，因为我将在一个新列表中过滤
this.dynamicofset=this.offset；
this.dynamicLimit=this.limit；
this.loadItems（filteredItems）；}
/**
*加载项目。
*/
loadItems（items:any=[]）：void{
让项目；
而（this.dynamicofset<ion-list>
<button *ngFor="let item of items | search : searchbarValue:searchbarFilters">
let filteredOptions = new SearchPipe().transform(this.items, this.searchbarValue, this.searchbarFilters);
<ion-searchbar
[placeholder]="searchbarPlaceholder"
(ionInput)="onSearch($event)"
[(ngModel)]="searchbarValue">
</ion-searchbar>
<!-- List filtered elements -->
<ion-list>
<button *ngFor="let item of filteredItems">
dynamicOffset: number = 0;
dynamicLimit: number = 30;
offset: number = 0;
limit: number = 30;
/**
* This function is called when some new value is placed in the searchbar.
* I have two arrays:
* - Original list with 2.000 values (this.items)
* - Filtered list empty (this.filteredItems)
*/
onSearch(): void {
// on every search I reset my filtered list
this.filteredItems.length = 0;
// I call the pipe passing by parameter the ORIGINAL list of items,
// the searchbarValue and the properties to look them for.
// I receive the filtered items.
let filteredItems = new SearchPipe().transform(this.items, this.searchbarValue, this.searchbarFilters);
// I reset the limits of the infinite scroll because I will be filtering in a new list
this.dynamicOffset = this.offset;
this.dynamicLimit = this.limit;
this.loadItems(filteredItems); }
/**
* Load items.
*/
loadItems(items: any = []): void {
let item;
while (this.dynamicOffset < this.dynamicLimit) {
item = items[this.dynamicOffset];
if (!item) break;
this.filteredItems.push(item);
this.dynamicOffset++;
}
this.dynamicLimit = this.dynamicLimit + this.limit;
}