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文件中执行相同的操作。代替在array中使用html变量，而使用function返回过滤结果。

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

Answer 3

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

   <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">

在模板中创建函数。

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

以html

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

它会很好用。

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

3 个答案: