时间戳

首页 > 解决方案 > Angular 中的自定义过滤器管道不会返回正确的结果

angular - Angular 中的自定义过滤器管道不会返回正确的结果

问题描述

我有一个用例，我希望能够搜索在我的 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>

用户列表.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);
  }
}

谁知道我该如何解决这个问题？

标签： angulartypescriptpipefiltering

解决方案

你可以试试这个解决方案

我在stackblitz上创建了一个演示

HTML 代码

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

Ts 文件代码

 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;
    })

  }

}

推荐阅读