通过文本搜索并更新Observable <array []> Angular 7

时间:2018-12-17 14:23:48

标签: angular filter rxjs observable angular7

我需要帮助。 我是Angular的新手,并且正在使用Angular 7最新版本。

所以我的HTML代码:

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

我的component.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,我只是推,删除并完成了。 但是,借助Observable,我如何实时更新列表?和过滤一样吗? 谢谢

1 个答案:

答案 0 :(得分:0)

在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变化不大,只需将filteredItems替换为result $ 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>