Angular 6 从 Observable 订阅中搜索前端实现

Question

由于我需要使用给定的 API，我需要在 FrontEnd 中实现全文搜索。问题如下，在启动时，前端从后端获取所有数据条目并在组件内订阅它们（使用异步管道）。所以没有 API 调用支持可以使用 getById() 之类的方法调用 BackEnd。

我需要在前端完全实现这个搜索功能。

所以给定一个对象属性:

export interface SomeObject {
  name: string
  // some properties
}

模板：

<tr *ngFor="let s of data | async">
 <!-- show data entries -->
</tr>

组件：

data: Observable<SomeObject[]>;

ngOnInit() {
  // makes API call to get all data entries
  this.data = this.dataService.fetchData()
}

我的问题：您是否知道任何好的示例实现或好的程序包如何在完全独立于后端而不进行 API 调用的情况下在前端实现完整的搜索功能？

我能找到的所有解决方案都是使用类似 getById() 的函数来调用 BackEnd。这是我无法使用的，因为我无法更改给定的后端。如果管道或包支持自动完成就太好了:)

Answer 1

使用局部变量

<ng-container *ngIf="data | async;let data">
    <tr *ngFor="let s of data | pipe">
     <!-- show data entries -->
    </tr>
 </ng-container>

然后创建过滤器管道

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

  transform(value: any, searchValue: any): any {
    console.log(value, searchValue);
    if (!searchValue) {
      return value;
    }
    else {
      return value.filter(value => {
        return value.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
      });
    }

  }

}

示例：https://stackblitz.com/edit/angular-xxukhg

Angular 6 从 Observable 订阅中搜索前端实现

Angular 6 Search FrontEnd Implementation from Observable subscription

frontend

full-text-search

typescript

angular