时间戳

首页 > 解决方案 > Angular 2+：当搜索是共享组件时在 json 数据中搜索

angular - Angular 2+：当搜索是共享组件时在 json 数据中搜索

问题描述

app.component使用 *ngfor 在视图中显示 json 数据。用户可以在他/她在搜索框中键入时执行搜索（基本上是在 keyup 事件上）。

为方便起见，我将此search.component设置为共享组件。

我已经编写了一个代码，想知道这是否是正确的方法，或者是否存在更好的方法。请帮忙。

注意：目前，代码有 7 个条目，但实际条目至少为 1000 个。

这是我的应用程序示例 POC。

在此处输入图像描述

search.component.html - 在输入的每个字符上，调用方法getSearchString()

<input type="text" placeholder="type here to search" (keyup)="getSearchString(text)" #text>

search.component.ts - 使用在公共服务中定义的主题_searchText来发出值。

getSearchString(text) {
  this.appService._searchText.next(text.value);
}

app.service.ts - 定义正在使用的主题。

 _searchText = new Subject<string>();
 getSearchText$ = this._searchText.asObservable();

app.component.ts - 订阅可观察的getSearchText$以搜索 json。

ngOnInit() {
    this.data = [
      {
        name: 'pranjal',
        id: 's1'
      }, {
        name: 'alini',
        id: 's2'
      }, {
        name: 'nishank',
        id: 's3'
      }, {
        name: 'pranvi',
        id: 's3'
      }, {
        name: 'mayuri',
        id: 's4'
      }, {
        name: 'malya',
        id: 's5'
      }, {
        name: 'pravi',
        id: 's5'
      }
    ];
    this.filteredData = JSON.parse(JSON.stringify(this.data));
    this.appService.getSearchText$.subscribe((searchText) => {
      this.filteredData = this.searchData(this.data, searchText);
    });
}

searchData(data, searchText) {
  let newData = [];
  if (!searchText) {
    newData = this.data;
  } else {
    newData = data.filter((obj) => {
      return obj.name.includes(searchText);
    });
  }
  return newData;
}

标签： angularsearchsubject-observer

解决方案

这种方法没有错。不同的方法来实现它。在您的情况下，您正在使用 observables 将通知从搜索组件发送到服务。我会反过来做，搜索组件会调用搜索服务上的一个方法。然后，搜索服务将在 observable 中发布结果。

你看过redux模式吗？可以强烈推荐它，尤其是对于较大的应用程序。我在非常大的应用程序中使用 ngrx，并且喜欢它。

推荐阅读