来自 Observable 订阅的 Angular 6 搜索前端实现

Question

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

我需要在 FrontEnd 中完全实现这个搜索能力。

所以给定一个具有某些属性的对象：

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