поиск по тексту и обновление ObservableУгловой 7

Question

мне нужна помощь.Я новичок в Angular, и я использую Angular 7, последний выпуск.

Итак, мой HTML-код:

<input type="text" class="form-control" (input)="onSearchChange($event.target.value)" placeholder="Search serial...">

Мой компонент.ts

  onSearchChange(searchValue: string) {
    //alert(searchValue);
    console.log(searchValue);
    this.filteredItems = this.listaTest; //uno un array di appoggio per la ricerca real-time
    this.filteredItems.subscribe(
      (response) => {
        console.log(response);
        this.filteredItems = response.filter(x => x.seriale.startsWith(searchValue));
        });
  }

Мой <ul> список:

<ul class="list-group" style="width:80%; margin:0 auto; font-weight: bold; margin-top: 2%;">
  <li *ngFor="let item of filteredItems | async" class="list-group-item">{{item.seriale}}
  <button style="float:right;">{{item.seriale}}Download certificati</button>
  </li>
</ul>

моя цель - обновить список <ul> при поиске пользователя в режиме реального времени,Итак, я попробовал с массивом, а не наблюдаемым, и я просто нажал и удалил и сделал.Но как с помощью Observable я могу обновлять список в реальном времени?И фильтрация одинаковая?Спасибо

Answer 1

В файле ts вы можете объединить поток поиска и поток списка, чтобы получить поток результатов.

// a stream of search keyword
const search$ = new Subject();

const refineSearch$ = search$.pipe(
  // you can filter out empty string if you want
  filter(keyword => keyword !== ''),
  // avoid to many work by debounceTime
  debounceTime(500),
)

// here use of for demonstration
// if your list is changing over time
// its should be a list of stream
const list$ = of(aListOfItem);

const result$ = combineLatest(refineSearch$, list$)
  .pipe(map(([keyword, list]) => getSearchResult(keyword, list)));

function getSearchResult(keyword, list) {
  // implement your filter
  // return an array
}

В шаблоне событие ввода просто примет следующее значение для потока поиска.

<input type="text" class="form-control" (input)="search$.next($event.target.value)" placeholder="Search serial...">

ul не сильно изменился, просто замените отфильтрованные элементы, чтобы получить $ stream

<ul class="list-group" style="width:80%; margin:0 auto; font-weight: bold; margin-top: 2%;">
  <li *ngFor="let item of result$ | async" class="list-group-item">{{item.seriale}}
  <button style="float:right;">{{item.seriale}}Download certificati</button>
  </li>
</ul>