Angular / Typescript中的对象过滤器

Posted 2023-03-13

【中文标题】Angular / Typescript中的对象过滤器

【英文标题】：Object Filter In Angular/Typescript

【发布时间】：2019-10-28 22:04:35

【问题描述】：

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

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

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

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

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

我在 html 中使用 ngFor -

*ngFor="let item of obj | keyvalue"

【参考方案1】：

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

【讨论】：

管道是保存过滤逻辑的地方。我的问题是关于逻辑的。

【参考方案2】：

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

 key: string, value: string []

这将使您能够使用数组过滤器并与 angular 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;
, )

【讨论】：

我知道，使用数组是可能的或解决数组。就我而言，我的对象中有很长的数据。我不希望它发生变化，因为它会产生性能问题。所以只需检查是否可以在对象中完成。

@Kanchan 在某些时候必须将其转换为数组以通过 Array 对象的 filter 或 reduce 方法过滤掉数据，所以我不确定你想在哪里越界

好的..这就是我想听到的。没有数组就不行。

【参考方案3】：

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

【讨论】：

不建议在 Angular 中使用 AngularJS。通过包含多个框架来避免使您的代码库复杂化。这可能会进一步导致许多无法预料的问题。还有许多其他方法可以在 Angular 中实现上述结果。如已接受的答案中所述，在您的组件中创建管道或过滤是其中两个。