Question

我有以下对象，我以表格格式显示“键”和“值”标题。

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

在输入字段中输入一些文字后，我需要立即进行过滤。

因此，如果我在输入字段中输入'a'，则它应返回/显示在下表中，因为它具有与键相同的匹配记录，且记录中均带有'a'或值-

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

我在html中使用ngFor-

* ngFor =“让obj |键值的项”

Answer 1

这里有example 基本上，对象并不是存储数组的好方法，可以将其更好地转换为具有以下结构的实际数组：

{ 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;
}, {})

Answer 2

您可以实现用于过滤结果的自定义管道。请注意，您可能需要在管道指令设置中将属性设置为“ pure”，否则，如果在同一页面上将项目添加到表中，则不会重新应用过滤器。另请注意，此选项不利于性能，因此请确保需要它。

Answer 3

您需要在Javascript中使用angularJS来实现该功能。您需要创建一个应用模块和一个控制器，以获取用户的输入，然后浏览数组并过滤出结果。

角度/打字稿中的对象过滤器

3 个答案: