Angular 2+: поиск в данных json, когда поиск является общим компонентом

Question

app.component имеет данные json, отображаемые в представлении, используя * ngfor. Пользователь может выполнять поиск по мере ввода в поле поиска (в основном по событию 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;
}

Answer 1

Ничего плохого в этом подходе. Различные способы достичь этого. В вашем случае вы используете наблюдаемые для отправки уведомления из поискового компонента в службу. Я бы сделал это наоборот, компонент поиска вызвал бы метод в службе поиска. Служба поиска затем опубликует результаты в заметной форме.

Вы смотрели на шаблон редукса? Очень рекомендую, особенно для больших приложений. Я использую ngrx в очень больших приложениях, и мне это нравится.

Answer 2

Все вроде бы хорошо - но у меня есть идея - вы можете просто отфильтровать ваши данные из 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 компонент в любом из ваших компонентов - Пожалуйста, не связывайте сервис в своем компоненте - если вы хотите обновить сервис, вам нужно изменить свой код - ваш компонент должен быть чем-то, что генерирует код по требованию, это должно быть что-то, что делает то же самое каждый раз

Надеюсь, это поможет вам - счастливого кодирования:)