Как внедрить компонент поиска и фильтрации ng bootstrap в мой компонент angular 8? - PullRequest
0 голосов
/ 03 апреля 2020

Я пытаюсь реализовать функцию поиска 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();
  }

}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...