Question

我想这样在顶部创建带有搜索过滤器的联系人列表

许多人说我们必须通过调用Web API来做到这一点，我不能通过在数组中创建一些名称来手动做到这一点。我也尝试过此链接

    https://stackoverflow.com/questions/40678206/angular-2-filter-search-list

仍然没有结果。在材料中也没有找到任何成分（https://material.angular.io/components），一些站点提到我们必须使用管道进行过滤，管道对我来说是一个非常新的概念。我如何实现？

Answer 1

您可以执行以下操作：

https://stackblitz.com/edit/angular-vchhay

使用过滤器，您可以使用输入来实现此目的。

使用管道编辑：

https://stackblitz.com/edit/angular-vchhay

使用管道非常简单。

Answer 2

如果您使用的是Angular 6，则不再支持过滤的管道。您将必须编写自己的管道。

See here

Angular不提供用于过滤或排序列表的管道。熟悉AngularJS的开发人员将其称为filter和orderBy。 Angular中没有等效项。

我会选择以下选项之一：

Angular Tutorial，在组件内部构建一个用于过滤数组的方法。与Ankit Sharma的建议类似。
使用jQuery过滤模板。（不推荐，但很简单）这是一个小例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Filterable List</h2>
  <p>Type something in the input field to search the list for specific items:</p>  
  <input class="form-control" id="myInput" type="text" placeholder="Search..">
  <br>
  <ul class="list-group" id="myList">
    <li class="list-group-item">First item</li>
    <li class="list-group-item">Second item</li>
    <li class="list-group-item">Third item</li>
    <li class="list-group-item">Fourth</li>
  </ul>  
</div>

<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myList li").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>

</body>
</html>

Answer 3

您可以使用filter的{{1}}（refer this）方法来过滤列表并收听Array的{{1}}事件，然后调用过滤列表的功能。

在Angular.js（v1）中，曾经有一个用于执行相同操作的过滤器（现称为管道）。 Angular提供了这样的功能的时代已经过去了。这主要是由于管道（从角度2开始）是纯净的/不纯净的。默认情况下，Angular提供的所有管道都是纯管道，因此不再有filterPipe。

您可以参考以下链接以了解为什么Angular团队删除了此功能：-

https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe

带有搜索过滤器的联系人列表

3 个答案: