Я пытаюсь реализовать функцию поиска ng bootstrap https://ng-bootstrap.github.io/# / components / table / examples # filtering в моем angular SPA, который я могу использовать для фильтрации данных в моей таблице, и У меня возникли трудности при попытке встроить функцию NGB ниже в мой код. Компонент Ngb передает countries$: Observable<COUNTRIES[]>
в таблицу в представлении, но эта наблюдаемая фильтруется, когда кто-то ищет в фильтре formcontrol:
function search(text: string, pipe: PipeTransform): Country[] {
return COUNTRIES.filter(country => {
const term = text.toLowerCase();
return country.name.toLowerCase().includes(term)
|| pipe.transform(country.area).includes(term)
|| pipe.transform(country.population).includes(term);
});
}
@Component({
selector: 'ngbd-table-filtering',
templateUrl: './table-filtering.html',
providers: [DecimalPipe]
})
export class NgbdTableFiltering {
countries$: Observable<Country[]>;
filter = new FormControl('');
constructor(pipe: DecimalPipe) {
this.countries$ = this.filter.valueChanges.pipe(
startWith(''),
map(text => search(text, pipe))
);
}
}
Мой компонент с нумерацией страниц ниже. В настоящее время я передаю свои ключевые поля на мою таблицу в виде объекта типа KEYFIELD []. Теперь, когда я хочу реализовать функцию поиска ngb, я испытываю трудности при попытке преобразовать ее в наблюдаемую, чтобы я мог подключить ее к элементу управления формы фильтра, как в коде ngb выше. Любая помощь приветствуется. Это мой текущий код:
function search(text: string): KEYFIELD[]{
return this.keyfields.filter(kf => {
const term=text.toLowerCase();
return kf.keyName.toLowerCase().includes(term);
})
}
@Component({
selector: 'app-keyfield',
templateUrl: './keyfield-list.component.html',
styleUrls: ['./keyfield-list.component.css'],
})
export class KeyfieldListComponent implements OnInit {
keyfields: KEYFIELD[];
constructor(private kfservice: KeyfieldDataService) {
}
page = 1;
pageSize = 10;
collectionSize: number;
previousPage: any;
alldata: KEYFIELD[];
filter=new FormControl('');
getKeyfields(): void {
if (this.alldata) {
this.paginate();
return;
}
this.kfservice.getKeyfields()
.subscribe(
kf => {
this.alldata = kf;
this.paginate();
}
);
}
paginate() {
this.keyfields = this.alldata.slice((this.page - 1) * this.pageSize, (this.page - 1) * this.pageSize + this.pageSize);
this.collectionSize = this.alldata.length;
}
loadPage(page: number) {
if (page !== this.previousPage) {
this.previousPage = page;
this.getKeyfields();
}
}
ngOnInit() {
this.getKeyfields();
}
}