无限向下滚动分页？

Question

我只得到，当“ a”字母过滤器完全加载然后“ b”字母过滤器工作时，像“ a”字母过滤器一样，直到重复最后一个字母？所以，我想要解决这个问题的方法，当我搜索任何字母时，都希望我的过滤器输出带负载.....我使用了导出过滤器，您可以看到下面的代码...

这是在module.ts中导入的外部管道，整个过滤器都通过了

 

import{ Pipe, PipeTransform} from '@angular/core';

@Pipe({
    name:"filter"
})

export class FilterPipe implements PipeTransform{
    newVal : any=[]
filterdata=[];
    transform(value:any, search){
        // console.log(value)
        if(search===undefined){
            return value;
        }
        else{
            this.filterdata=[];
            for(let k of value){
                // console.log(k)
                if(k.city.toLowerCase().indexOf(search)==search.indexOf(search)){
                    // console.log(search)
                    this.filterdata.push(k);

                }
            }
        }return this.filterdata;

    }
}

这是module.ts文件： 我只得到“ a”字母过滤器，当“ a”字母过滤器完全加载后，“ b”字母过滤器正在工作，就像它重复到最后一个字母一样吗？所以，我想要解决这个问题的方法，当我搜索任何字母时，都希望我的过滤器输出带负载.....我使用了导出过滤器，您可以看到下面的代码...

这个app.ts文件的整个逻辑在这里，这是我正在检查的主要条件，如果此条件改变了我的整个筛选器搜索。

整个进出口课程将在这里进行：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule} from '@angular/forms';
import { RouterModule, Routes} from '@angular/router';
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
import { ScrollEventModule } from 'ngx-scroll-event';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { AutocompltePaginationComponent } from './autocomplte-pagination/autocomplte-pagination.component';
import{ FilterPipe} from './app.filter';
import {NgAutoCompleteModule} from "ng-auto-complete";

const routes : Routes = ([
{ path : 'login', component : LoginComponent},
{path : 'autocomplte-pagination', component : AutocompltePaginationComponent}
])

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    AutocompltePaginationComponent,
    FilterPipe
  ],
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(routes),
    InfiniteScrollModule,
    ScrollEventModule,
    NgAutoCompleteModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这个app.ts文件的整个逻辑在这里，这是我正在检查的主要条件，如果此条件改变了我的整个筛选器搜索。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-autocomplte-pagination',
  templateUrl: './autocomplte-pagination.component.html',
  styleUrls: ['./autocomplte-pagination.component.css']
})
export class AutocompltePaginationComponent implements OnInit {

  constructor(

  ) { }
  public search: any;
  public data : any =[];
  public noOfItemsToShowInitially: number = 5;
  public itemsToLoad: number = 1;
  public isFullListDisplayed: boolean = false;
  public itemsToShow;
  public countries: any = [
    { 'city': 'abbeville', 'state': 'Louisiana' },
    { 'city': 'Aberdeen', 'state': 'Maryland' },
    { 'city': 'Aberdeen', 'state': 'Mississippi' },
    { 'city': 'Aberdeen', 'state': 'South Dakota' },
    { 'city': 'Aberdeen', 'state': 'Washington' },
    { 'city': 'Abilene', 'state': 'Texas' },
    { 'city': 'Abilene', 'state': 'Kansas' },
    { 'city': 'Abingdon', 'state': 'Virginia' },
    { 'city': 'Abington', 'state': 'Massachusetts' },
    { 'city': 'Abington', 'state': 'Massachusetts' },
    { 'city': 'Absecon', 'state': 'New Jersey' },
    { 'city': 'Accokeek', 'state': 'Maryland' },
    { 'city': 'Acton', 'state': 'Massachusetts' },
    { 'city': 'Acushnet', 'state': 'Massachusetts' },
    { 'city': 'Acworth', 'state': 'Georgia' },
    { 'city': 'Ada', 'state': 'Oklahoma' },
    { 'city': 'Adams', 'state': 'Massachusetts' },
    { 'city': 'Addison', 'state': 'Illinois' },
    { 'city': 'Addison', 'state': 'Texas' },
    { 'city': 'Adelanto', 'state': 'California' },
    { 'city': 'Adelphi', 'state': 'Maryland' },
    { 'city': 'Adrian', 'state': 'Michigan' },
    { 'city': 'Affton', 'state': 'Missouri' },
    { 'city': 'Agawam', 'state': 'Massachusetts' },
    { 'city': 'Agoura Hills', 'state': 'California' },
    { 'city': 'Ahuimanu', 'state': 'Hawaii' },
    { 'city': 'Aiea', 'state': 'Hawaii' },
    { 'city': 'Aiken', 'state': 'South Carolina' },
    { 'city': 'Air Force Academy', 'state': 'Colorado' },
    { 'city': 'Airmont', 'state': 'New York' },
    { 'city': 'Akron', 'state': 'Ohio' },
    { 'city': 'Alabaster', 'state': 'Alabama' },
    { 'city': 'Alachua', 'state': 'Florida' },
    { 'city': 'Alameda', 'state': 'California' },
    { 'city': 'Alamo', 'state': 'California' },
    { 'city': 'Alamo', 'state': 'Texas' },
    { 'city': 'Alamo Heights', 'state': 'Texas' },
    { 'city': 'Alamogordo', 'state': 'New Mexico' },
    { 'city': 'Alamosa', 'state': 'Colorado' },
    { 'city': 'Albany', 'state': 'Georgia' },
    { 'city': 'Albany', 'state': 'California' },
    { 'city': 'Albany', 'state': 'New York' },
    { 'city': 'Albany', 'state': 'Oregon' },
    { 'city': 'Albemarle', 'state': 'North Carolina' },
    { 'city': 'Albert Lea', 'state': 'Minnesota' },
    { 'city': 'Albertville', 'state': 'Alabama' },
    { 'city': 'Albion', 'state': 'Michigan' },
    { 'city': 'Albion', 'state': 'New York' },
    { 'city': 'Albion', 'state': 'New York' },
    { 'city': 'Albuquerque', 'state': 'New Mexico' },
    { 'city': 'Alcoa', 'state': 'Tennessee' },
    { 'city': 'Alden', 'state': 'New York' },
    { 'city': 'Alderwood Manor', 'state': 'Washington' },
    { 'city': 'Aldine', 'state': 'Texas' },
    { 'city': 'Alexander City', 'state': 'Alabama' },
    { 'city': 'Alexandria', 'state': 'Indiana' },
    { 'city': 'Alexandria', 'state': 'Minnesota' },
    { 'city': 'Alexandria', 'state': 'Kentucky' },
    { 'city': 'Alexandria', 'state': 'Louisiana' },
    { 'city': 'Alexandria', 'state': 'Virginia' },
    { 'city': 'Algonquin', 'state': 'Illinois' },
    { 'city': 'Alhambra', 'state': 'California' },
    { 'city': 'Alice', 'state': 'Texas' },
    { 'city': 'Aliquippa', 'state': 'Pennsylvania' },
    { 'city': 'Aliso Viejo', 'state': 'California' },
    { 'city': 'Allegany', 'state': 'New York' },
    { 'city': 'Allen', 'state': 'Texas' },
    { 'city': 'Allen Park', 'state': 'Michigan' },
    { 'city': 'Allendale', 'state': 'Michigan' },
    { 'city': 'Allendale', 'state': 'New Jersey' },
    { 'city': 'Allentown', 'state': 'Pennsylvania' },
    { 'city': 'Alliance', 'state': 'Ohio' },
    { 'city': 'Alliance', 'state': 'Nebraska' },
    { 'city': 'Allouez', 'state': 'Wisconsin' },
    { 'city': 'Alma', 'state': 'Michigan' },
    { 'city': 'Aloha', 'state': 'Oregon' },
    { 'city': 'Alondra Park', 'state': 'California' },
    { 'city': 'Alpena', 'state': 'Michigan' },
    { 'city': 'Alpharetta', 'state': 'Georgia' },
    { 'city': 'Alpine', 'state': 'California' },
    { 'city': 'Alpine', 'state': 'Utah' },
    { 'city': 'Alsip', 'state': 'Illinois' },
    { 'city': 'Alta Sierra', 'state': 'California' },
    { 'city': 'Altadena', 'state': 'California' },
    { 'city': 'Altamont', 'state': 'Oregon' },
    { 'city': 'Altamont', 'state': 'New York' },
    { 'city': 'Altamonte Springs', 'state': 'Florida' },
    { 'city': 'Alton', 'state': 'Illinois' },
    { 'city': 'Altoona', 'state': 'Iowa' },
    { 'city': 'Altoona', 'state': 'Pennsylvania' },
    { 'city': 'Altoona', 'state': 'Wisconsin' },
    { 'city': 'Altus', 'state': 'Oklahoma' },
    { 'city': 'Alum Rock', 'state': 'California' },
    { 'city': 'Alvin', 'state': 'Texas' },
    { 'city': 'Amarillo', 'state': 'Texas' },
    { 'city': 'Ambler', 'state': 'Pennsylvania' },
    { 'city': 'Ambridge', 'state': 'Pennsylvania' },
    { 'city': 'American Canyon', 'state': 'California' },
    { 'city': 'American Fork', 'state': 'Utah' },
    { 'city': 'Americus', 'state': 'Georgia' },
    { 'city': 'Ames', 'state': 'Iowa' },
    { 'city': 'Amesbury', 'state': 'Massachusetts' },
    { 'city': 'Amesbury', 'state': 'Massachusetts' },
    { 'city': 'Amherst', 'state': 'New Hampshire' },
    { 'city': 'Amherst', 'state': 'Massachusetts' },
    { 'city': 'Amherst', 'state': 'Ohio' },]

    ngOnInit() {
    this.itemsToShow = this.countries.slice(0, this.noOfItemsToShowInitially);
  }
  loadmore(select) {
    if (this.noOfItemsToShowInitially <= this.countries.length) {
      // Update ending position to select more items from the array
      this.noOfItemsToShowInitially += this.itemsToLoad;
      this.itemsToShow = this.countries.slice(0, this.noOfItemsToShowInitially);
    }
    else {
      this.isFullListDisplayed = true;
    } 
  }
}

这是我的整个CSS文件：

我只得到，当“ a”字母过滤器完全加载然后“ b”字母过滤器工作时，像“ a”字母过滤器一样，直到重复最后一个字母？所以，我想要解决这个问题的方法，当我搜索任何字母时，都希望我的过滤器输出带负载.....我使用了导出过滤器，您可以看到下面的代码...

.title{
    padding: 8px 16px;
    background: #cae0eb;
    float: left;
    border-radius: 5px;
    background: #fff;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    /* width: unset; */
    position: relative;
    height: 100%;
}
.region-set{
    position: fixed;
    width: 21%;
}
input:focus{
    outline: none;
}
input[type=search] {
    -webkit-appearance: none;
    letter-spacing: 2px;
    font-weight: 900;
}
.filter-search{
    left: 0px;
    margin-top: 0px;
    top: 210%;
    left: 15px;
    width: 51%;
    /* min-width: 173px; */
    z-index: 10;
    /* min-height: 100%; */
    /* height: 100%;  */
        /* overflow-y: auto;  */
    position: absolute;
    text-shadow: 0 0 0 transparent;
    border-left:1px solid  rgba(0, 0, 0, 0.14);
    border-right:1px solid  rgba(0, 0, 0, 0.14);
}
#name{
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: none;
    border-radius: 0;
}
.filter-borders{
    padding: 5px 5px;
    /* border-bottom:1px solid  rgba(0, 0, 0, 0.14); */
    cursor: pointer;
}
 .search-results {
    height:  14rem;
    overflow-y: auto;
    border-bottom:1px solid  rgba(0, 0, 0, 0.14);
  }

我只得到，当“ a”字母过滤器完全加载然后“ b”字母过滤器工作时，像“ a”字母过滤器一样，直到重复最后一个字母？所以，我想要解决这个问题的方法，当我搜索任何字母时，都希望我的过滤器输出带负载.....我使用了导出过滤器，您可以看到下面的代码...

这是我整个HTML文件的过滤器和循环文件。

<div class="col-xs-5 title">
        <input type="search" placeholder="Type region or city" id="name"  class="region-set" [(ngModel)]="search">
        <div class="filter-search" *ngIf="search"> 
        <div class="search-results"
            (scroll)="loadmore($event)" infiniteScroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="50" [scrollWindow]="false" [infiniteScrollDisabled]="isFullListDisplayed">
            <div *ngFor="let items of itemsToShow | filter:search; let i=index" class="filter-borders">
                <span (click)="selectCities($event)"> {{i + 1 + ' . ' + items.city}}&nbsp; &&nbsp;
                    <strong>State</strong>: &nbsp;{{items.state}}</span>
            </div>
        </div>

        </div>
    </div>