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

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

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

Answer 2

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

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