Angular 角形过滤器中的自定义过滤管'；t返回正确的结果

我有一个用例，希望能够在我的Angular应用程序中搜索在mongodb中注册的用户列表

为此，我使用自定义管道根据用户的地址筛选用户。但是，它永远不会返回正确的用户。如果我在搜索字段中键入字母“W”，应用程序在实例“W”出现的位置找到2个地址，它将只返回数据库中的2个首次注册用户，而不是实际居住在包含“W”的地址的用户。如果有3个实例，它将返回数据库中的前3个用户，依此类推

我想这一定是因为我根据索引显示数据库中的每个用户，但我不知道如何才能显示用户列表

代码如下：

过滤器.pipe.ts:

 import { Pipe, PipeTransform, Injectable } from "@angular/core";
  import { User } from "../entities/user";

 @Pipe({
  name: 'filter'
  })
 @Injectable()
   export class FilterPipe implements PipeTransform {

//ARGS contain what we write in the field.
transform(items: User[], args: string): any {

if(args && items.length > 0) {
    let itemsFound = items.filter(

        item => 
        item.address && 
        item.address.toLowerCase().includes(args.toLowerCase())


    );


    if(itemsFound && itemsFound.length > 0) {


        return itemsFound;
    }

    return [-1]; //in case none is found.
}

return items; // we could change to return [] if we didnt want to show any users until someone wrote something in
} }

用户列表.component.html:

<div class="container-fluid">
  <div class="row">

  <div *ngFor="let user of users | filter: search; let i = index" class="e2e-baby">
      <div class="col-lg-12 col-md-12 mb-12 mt-4">     
   <mat-card class="example-card">
      <mat-card-header>
        <div mat-card-avatar class="example-header-image"></div>
        <mat-card-title><b>Babys navn:</b> {{users[i].fullnameBaby}}</mat-card-title>
        <mat-card-subtitle><b>Forældrens navn: </b> {{users[i].fullname}}  </mat-card-subtitle>
      </mat-card-header>



      <img  mat-card-image src="http://localhost:3000/{{users[i].profilePicture}}" alt="Photo of a Shiba Inu" style="width:400px; height: 350px;">

      <mat-card-content>
        <p>
        {{users[i].infoAboutUser}}
        </p>

        <p><small>Kan findes her: {{users[i].address}}, {{users[i].zipcode}} </small></p>
      </mat-card-content>



      <mat-card-actions>
        <button mat-button (click)="hire(users[i])">Hyr</button>
        <button mat-button>Rate</button>
      </mat-card-actions>
    </mat-card>


  </div> 
  <!-- end of colcard -->



    </div>

  </div>
</div>

婴儿导航：{{用户[i].fullnameBaby}
对于ældrens navn:{{users[i].fullname}

{{users[i].infoAboutUser}

Kan发现她：{{users[i].address}，{{{users[i].zipcode}

海拉尔
比率

用户列表.component.ts

import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
import { NgRedux } from '@angular-redux/store';
import { IAppState } from '../store/store';
import {changeNavbarColor} from '../../assets/javascript/transperentNavbar.js';
import { UsersService } from '../users.service';
import { UsersActions } from '../users.actions';
import { Sitter } from '../entities/sitter';
import { User } from '../entities/user';

import { FilterPipe } from './filter.pipe';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.scss'],

})
export class UserListComponent implements OnInit {

  private users: User[];

  constructor(private ngRedux: NgRedux<IAppState>, private userService: UsersService,
  private usersActions :UsersActions) { changeNavbarColor(); }

  ngOnInit() {
    this.usersActions.getUsers(); //gets all users on the load of the page

    this.ngRedux.select(state => state.users).subscribe(u=> {
      this.users = u.users;
      console.log(this.users);

    })

  }


  hire(user: User){

    this.userService.sendNotification(user).subscribe(result => {
      console.log(result);
    });
    console.log("This guy have been hired.")
    console.log(user);
  }
}

从'@angular/core'导入{Component，OnInit，Input，EventEmitter，Output}；
从'@angular-redux/store'导入{NgRedux}；
从“../store/store”导入{IAppState}；
从“../../assets/javascript/transperentNavbar.js”导入{changeNavbarColor}；
从“../users.service”导入{UsersService}；
从“../users.actions”导入{UsersActions}；
从“../entities/Sitter”导入{Sitter}；
从“../entities/User”导入{User}；
从“/filter.pipe”导入{FilterPipe}；
@组成部分({
选择器：“应用程序用户列表”，
templateUrl:'./user list.component.html'，
样式URL:['./用户列表.component.scss']，
})
导出类UserListComponent实现OnInit{
私人用户：用户[]；
构造函数（私有ngRedux:ngRedux，私有userService:UsersService，
私有usersActions:usersActions）{changeNavbarColor（）；}
恩戈尼尼特（）{
this.usersActions.getUsers（）；//获取页面负载上的所有用户
this.ngRedux.select（state=>state.users）.subscribe（u=>{
this.users=u.users；
console.log（this.users）；
})
}
租用（用户：用户）{
this.userService.sendNotification（user.subscribe）（结果=>{
控制台日志（结果）；
});
log（“这家伙已经被雇佣了。”）
console.log（用户）；
}
}

---

有人知道我如何解决这个问题吗？

你可以试试这个解决方案

我已经在上创建了一个演示

HTML代码

搜索过滤器

---

尝试在

项上使用
.indexOf（）
而不是
.includes（）
。除非我弄错了，
.includes（）
在数组上工作，而不是在字符串上。谢谢你的回复。我尝试使用indexOf（），但这样做时，它根本不会过滤任何内容。我觉得您的代码很好。你确定所有的东西都正确声明了吗？这解决了我的问题，因为在分析了你的答案后，我发现不用使用{{users[I].address}查看用户并将其基于索引，而只需编写{{user.address}。当我这样做的时候，我的过滤工作正常。非常感谢你花时间写这篇文章！我帮了很多忙。
<input type="text" [(ngModel)]="terms" placeholder="Serach any fields"/>

<table border="1" width="100%">
  <tr>
    <th>Name</th>
    <th>Venue</th>
  </tr>
  <tr *ngFor="let usrData of users | search:terms">
    <td>{{usrData.name}}</td>
    <td>{{usrData.venue}}</td>
  </tr>
</table>

 users=[{
    name:'test 1',
    venue:'venue 1'
  },{
    name:'user',
    venue:'305 vijay nagar'
  },{
    name:'Admin',
    venue:'test venue'
  },{
    name:'user 5',
    venue:'254561'
  }]

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'search'
})
export class SearchPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    if(!args){
      return value;
    }
    return value.filter((val)=>{
      let rVal=(val.name.toLocaleLowerCase().includes(args)) || (val.venue.toLocaleLowerCase().includes(args));
      return rVal;
    })

  }

}