在 Angular 6 中过滤用户而不创建自定义管道

Question

我想采用下面的 user.component 模板并使其在文本输入字段中输入的字符串过滤用户数组中的项目。换句话说，我只希望显示与输入的字符串匹配的数组中的那些用户。如何在不创建自定义管道的情况下将输入值绑定到视图？由于我使用的是 Angular 6，我不能再使用“过滤器”管道了。

如果我使用 [(ngModel)] 双向绑定指令，如何在不创建自定义管道的情况下过滤传递到组件内部的字符串？

这里是 users.component.html 模板：

<div class="wrapper">
  <span id = "search-box"><input class = "col-lg-7" id= "search-input" type="text"  name="users" placeholder = "Search by name"></span>
  <span id= "people">{{users.length}} <span *ngIf = "users.length == 1">Person</span><span *ngIf = "users.length > 1">People</span></span>
  <div class="accordion" id="accordionExample">
  <div class="card" *ngFor = "let user of users">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" [attr.data-target]="'#' + user" aria-expanded="true" aria-controls="collapseOne">
          {{user}}
        </button>
      </h5>
    </div>
      <div [attr.id]= "user" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
       <div class="card-body">
        <img src="./assets/user.jpg" id= "user-pic">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div><!-- end of .card -->
 </div><!--end of .accordion-->
</div><!--end of .wrapper -->

这里是 users.component.ts 文件：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit { 

 users: any[] = [
    "Bob",
    "James",
    "Mary"
  ];

  constructor() { }

  ngOnInit() {
  }
}

如果我需要使用自定义管道，请告诉我如何设置？

Answer 1

您可以使用 （输入）来完成。当输入改变时你必须过滤你的数组。 所以使用原型模式你必须保留你的数组的副本。我已经为你做了一个例子。 StackBlitz link

Answer 2

如果您不想使用pipe，那么您可以在ts 文件中执行相同的操作。不要在html 中使用array 变量，而是使用返回过滤结果的function。

示例演示在这里 - https://stackblitz.com/edit/angular-shghzh

Answer 3

我不知道您为什么要谈论自定义管道或其他任何东西。我认为最好的解决方案是 1. 创建另一个数组，将在您的视图中使用filteredUsers: any[]。 2. 其次将这段代码添加到你的teamplate

   <input class = "col-lg-7"
    id="search-input"
    type="text"  name="users" 
    placeholder = "Search by name" 
    (onModelChange)='filterArray($event)'>

并更改您的 ngFor 中的数组。

 <div class="card" *ngFor = "let user of filteredUsers">

1. 在您的模板中创建函数。

filterArray(event){ this.filteredUsers = this.users.filter(user => user === event); }

在html中

<div class="card" *ngFor = "let user of filteredUsers">

它会很好用。