Пользовательская труба фильтра в Angular не дает правильных результатов - PullRequest
Новая
       9

Пользовательская труба фильтра в Angular не дает правильных результатов

0 голосов
/ 08 июня 2018

У меня есть сценарий использования, в котором я хочу иметь возможность поиска по списку пользователей, зарегистрированных в mongodb в моем приложении Angular.

Для этой цели я фильтрую пользователей по ихадрес с использованием пользовательских каналов.Тем не менее, он никогда не возвращает правильного пользователя.Если я введу букву «W» в поле поиска, и приложение найдет 2 адреса, где встречается экземпляр «W», оно просто вернет 2 первых зарегистрированных пользователей в базе данных, а не пользователей, которые фактически живут по адресу, который имеетбуква "W" включена в него.Если есть 3 экземпляра, он вернет 3 первых пользователей в базе данных и т. Д.

Я думаю, что это должно быть из-за того, что я показываю каждого пользователя в базе данных на основеиндекс, но я не знаю, как я мог бы показать список пользователей в противном случае.

Это код:

filter.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
} }

user-list.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>

user-list.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);
  }
}

Кто-нибудь, кто знает, как я могу решить эту проблему?

1 Ответ

0 голосов
/ 08 июня 2018

вы можете попробовать это решение

Я создал демо на 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;
    })

  }

}
...