通过 Angular 2 中的子数组过滤对象列表

mattc19

我有看起来像这样的数据

[
  {id: 1234,
   Name: 'John',
   Tags: ['tag1', 'tag2']
  },
  {id: 1235,
   Name: 'Mike',
   Tags: ['tag1', 'tag3']
  }
]

我希望能够在搜索栏中输入并过滤数据以搜索相关标签。在 angular 1 中有一个内置的过滤器管道,但看起来它已在 angular 2 中删除。我一直在研究自定义管道,但我能想到的唯一方法是使用嵌套循环来循环然后所有对象循环遍历标签。我在想这个错误吗。有没有更简单的方法来做到这一点,或者有一个内置的功能可以做到这一点?

浮潜

您可以只使用普通的 javascript API 来获得该行为:

data = [
  {id: 1234,
   Name: 'John',
   Tags: ['tag1', 'tag2']
  },
  {id: 1235,
   Name: 'Mike',
   Tags: ['tag1', 'tag3']
  }
];

filterDataByTag(searchTerm: string) {

   // filter the data array, based on some condition
   return this.data.filter(item => {

      // only include an item in the filtered results
      // if that item's Tags property includes the searchTerm
      // includes is a built in array method in ES2016
      return item.Tags.includes(searchTerm);
   });  
}

在我的示例中,我正在努力编码data,但您可以根据自己的情况进行调整。关键是该函数返回一个data基于 searchTerm的过滤列表,因此您可以在每次要刷新过滤列表时调用此方法(例如在搜索字段的输入事件上)

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

对象数组过滤 angular2

来自分类Dev

Angular 2 - 比较数组过滤器中的日期

来自分类Dev

Angular2使用管道根据对象数组过滤对象数组

来自分类Dev

通过Angular 2中的ngModel选择列表获取对象属性?

来自分类Dev

angular 2 通过服务共享数组

来自分类Dev

Angular2/Typescript:如何通过管道获取对象数组?

来自分类Dev

通过OnInit在Angular 2中测试Promise

来自分类Dev

通过嵌套的对象值数组过滤对象数组

来自分类Dev

通过对象中的字符串数组过滤和排列对象

来自分类Dev

angular 2 Pipe-通过JSON键过滤

来自分类Dev

angular 2 Pipe-通过JSON键过滤

来自分类Dev

lodash 按 Angular 5 数组过滤对象数组

来自分类Dev

Angular2 - 通过事件的对象访问变量

来自分类Dev

如何通过*ngFor在angular 2 typescript前端显示json数组

来自分类Dev

使用管道Angular 2过滤对象数组

来自分类Dev

通过Angular.js中的公共对象属性过滤数组?

来自分类Dev

通过组件导航-Angular 2

来自分类Dev

通过Angular2中的嵌套组件发出事件

来自分类Dev

通过Angular2中的嵌套组件发出事件

来自分类Dev

如何通过某个值“连接” Angular中的2个变量

来自分类Dev

服务订阅通过OnInit在[Angular 2]中启动多个时间

来自分类Dev

通过 angular 2 中的多个组件访问服务的属性?

来自分类Dev

如何通过单击更改 Angular 2 中的 URL?

来自分类Dev

从 Angular2 模板中通过引用传递变量

来自分类Dev

如何通过多个输入angular2将新对象提交到数组

来自分类Dev

Angular 2+和Entity Framework:无法通过ID获取对象,返回空数组

来自分类Dev

Angular 2通过接收到的JSON HTTP获得数组/对象

来自分类Dev

根据值数组过滤Angular中JSON中的选择

来自分类Dev

如何通过另一个对象数组过滤对象数组[ES6]

Related 相关文章

  1. 1

    对象数组过滤 angular2

  2. 2

    Angular 2 - 比较数组过滤器中的日期

  3. 3

    Angular2使用管道根据对象数组过滤对象数组

  4. 4

    通过Angular 2中的ngModel选择列表获取对象属性?

  5. 5

    angular 2 通过服务共享数组

  6. 6

    Angular2/Typescript:如何通过管道获取对象数组?

  7. 7

    通过OnInit在Angular 2中测试Promise

  8. 8

    通过嵌套的对象值数组过滤对象数组

  9. 9

    通过对象中的字符串数组过滤和排列对象

  10. 10

    angular 2 Pipe-通过JSON键过滤

  11. 11

    angular 2 Pipe-通过JSON键过滤

  12. 12

    lodash 按 Angular 5 数组过滤对象数组

  13. 13

    Angular2 - 通过事件的对象访问变量

  14. 14

    如何通过*ngFor在angular 2 typescript前端显示json数组

  15. 15

    使用管道Angular 2过滤对象数组

  16. 16

    通过Angular.js中的公共对象属性过滤数组?

  17. 17

    通过组件导航-Angular 2

  18. 18

    通过Angular2中的嵌套组件发出事件

  19. 19

    通过Angular2中的嵌套组件发出事件

  20. 20

    如何通过某个值“连接” Angular中的2个变量

  21. 21

    服务订阅通过OnInit在[Angular 2]中启动多个时间

  22. 22

    通过 angular 2 中的多个组件访问服务的属性?

  23. 23

    如何通过单击更改 Angular 2 中的 URL?

  24. 24

    从 Angular2 模板中通过引用传递变量

  25. 25

    如何通过多个输入angular2将新对象提交到数组

  26. 26

    Angular 2+和Entity Framework:无法通过ID获取对象,返回空数组

  27. 27

    Angular 2通过接收到的JSON HTTP获得数组/对象

  28. 28

    根据值数组过滤Angular中JSON中的选择

  29. 29

    如何通过另一个对象数组过滤对象数组[ES6]

热门标签

归档