0

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;
}
4

2 回答 2

0

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

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

于 2018-11-12T07:26:47.910 回答
0

一切似乎都很好-但我有一些想法-您可以从component您拥有原始数据的地方过滤您app.component.ts的数据，因此只需触发来自孩子的事件search.component.ts并过滤数据

search.component.ts

@Output() searchText = EventEmitter<any>();
getSearchString(text) {
   this.searchText.emit(text);
}

每次文本更改时，它都会将文本更改发送到您的父组件

app.component.html

<child-component (searchText)="searchData($event)" ></child-component>

app.component.ts

searchData(event: any) {
  let newData = [];
  if (!event) {
    newData = this.data;
  } else {
    newData = this.data.filter(obj =>  obj.name.includes(event));
  }
  this.data = [...newData];
}

每当您使用此组件时，这将是您的动态组件，它将传递搜索文本，您可以search在任何组件中使用此组件 - 请不要在组件中绑定服务 - 如果您想更新您需要的服务更改您的代码 - 您的组件应该是按需生成代码的东西，它应该是每次都执行相同操作的东西

希望这对您有所帮助-快乐编码:)

于 2018-11-12T07:30:34.320 回答