Фильтр объекта в Angular / Typescript - PullRequest
Новая
       18

Фильтр объекта в Angular / Typescript

1 голос
/ 14 июня 2019

У меня есть следующий объект, который отображается в табличном формате 'Key' и 'Value' header. 

 {
        "ab": "a val",
        "bc": "baa",
        "kk": "try",
        "dd": "again"
 }

Мне нужно отфильтровать, как только я введу какой-то текст в поле ввода.

Так что, если я введу 'a' в поле ввода, то он должен вернуть / отобразить в таблице следующее, поскольку он имеет соответствующие записи с 'a' либо включ или значение - 

{
            "ab": "a val",
            "bc": "baa",
            "dd": "again"
}

Я использую ngFor в html -

* ngFor = "let item of obj | keyvalue"

Ответы [ 3 ]

1 голос
/ 14 июня 2019

Вот вам пример По сути, объект не очень хороший способ хранения массивов, лучше преобразовать его в реальный массив со структурой вроде: 

{ key: string, value: string }[]

Это позволит вам использовать фильтр массива и плавно интегрируется с угловым ngFor.

В компоненте: 

  /** Fixed structure or some logic that will transform your data into it like for exampe reducer */
  list = [
    { key: 'ab', value: 'a val' },
    { key: 'bc', value: 'baa' },
    { key: 'kk', value: 'try' },
    { key: 'dd', value: 'again' },
  ]

  /** Search phrase that will be used for filtering your data set */
  phrase$ = new BehaviorSubject<string>('');

  /** Observable for filtering out data to show in table */
  items$ = this.phrase$.pipe(
    map((phrase = '') => phrase.length > 0
      ? this.list
        .filter(({ value }) => value.indexOf(phrase) >= 0).slice(0)
      : this.list
    )
  )

  /** pushing new phrase values */
  onChange(e) {
    this.phrase$.next(e);
  }

В шаблоне 

Enter search phrase: <input (keyup)="onChange($event.target.value)">
<table>
  <tr *ngFor="let item of items$ | async"><th>{{ item.key }}</th><td> {{ item.value }}</td></tr>
</table>

Если вам нужна логика для преобразования данных в массив: 

list = Object.entries(data).reduce((result, [key, value]) => {
  result[key] = value;
  return result;
}, {})
0 голосов
/ 14 июня 2019

Вам нужно использовать angularJS в Javascript для этой функциональности.Вам необходимо создать модуль приложения и контроллер, который получает данные от пользователя, затем просматривает массив и отфильтровывает результаты.

0 голосов
/ 14 июня 2019

Вы можете реализовать пользовательский канал, который фильтрует результат. Обратите внимание, что вам может потребоваться установить свойство «pure» в настройках директивы pipe, иначе фильтр не будет применен повторно, если элемент будет добавлен в таблицу на той же странице. Также обратите внимание, что этот параметр не подходит для производительности, поэтому убедитесь, что он вам нужен.

...