我只得到，当“ a”字母过滤器完全加载然后“ b”字母过滤器工作时，像“ a”字母过滤器一样，直到重复最后一个字母？所以，我想要解决这个问题的方法，当我搜索任何字母时，都希望我的过滤器输出带负载.....我使用了导出过滤器，您可以看到下面的代码...
//app.filter.ts
//from here data is getting from components.ts file and returning data to same ts file and the data i am sending to html file and there i am rendering data to display
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;
}
}
//component.ts file
//here entire logic goes here and data keep here with some data key name and the logic is build by the data getting from filter data
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;
}
}
}
//app.module.ts file
//this is entire module.ts file and importing each and every file to get the out if anything miss out please do add any imports to need to run
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 { }
the css style has been set but if need any extra css do add...
.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);
}
<!-- this entire html file the front page design and almost navigation to filter is going here -->
<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}} &
<strong>State</strong>: {{items.state}}</span>
</div>
</div>
</div>
</div>