时间戳

首页 > 解决方案 > Angular 4: Ng2SearchPipeModule 使用这个模块进行搜索。无法在数字数据上正常工作

javascript - Angular 4: Ng2SearchPipeModule 使用这个模块进行搜索。无法在数字数据上正常工作

问题描述

import { Injectable } from '@angular/core';
import { IFavContactSchema } from './favSchema';
@Injectable({
  providedIn: 'root'
})
export class FavContactServiceService {
  allContactDetails:IFavContactSchema[] = [
    {
      first_name:"neha",middle_name:"singh",last_name:"sengar",email:"neha.singh931126@gmail.com",mobile_number:9898989898,phone_number:8989898989,notes:"Add to my faver",calling_rate:"frequent"
    },
    {
      first_name:"sonal",last_name:"trivedi",email:"sonal.trivedi@gmail.com",mobile_number:9092312345,phone_number:8989898989,notes:"Add to my onme",calling_rate:"frequent"
    },
    {
      first_name:"oshin",last_name:"sharma",email:"oshin.sharma@gmail.com",mobile_number:9522335434,phone_number:8989898989,notes:"Add to my tow",calling_rate:"frequent"
    },
    {
      first_name:"karasadn",last_name:"sdasd",email:"karan.veer@gmail.com",mobile_number:8839367967,phone_number:8989898989,notes:"Add to my three",calling_rate:"non_frequent"
    },
    {
      first_name:"kunil",last_name:"sharma",email:"kanul.sharma@gmail.com",mobile_number:9097854322,phone_number:8989898989,notes:"Add to my four",calling_rate:"frequent"
    },
    {
      first_name:"kane",last_name:"jain",email:"ranie.jain@gmail.com",mobile_number:8989673422,phone_number:8989898989,notes:"Add to my five",calling_rate:"frequent"
    },
    {
      first_name:"sane",last_name:"sharma",email:"punit.deer@gmail.com",mobile_number:9000000000,phone_number:8989898989,notes:"Add to my six",calling_rate:"non_frequent"
    },
  ];
  constructor() { }

  addContacts(details:IFavContactSchema){
      this.allContactDetails.push(details);
      return "Data Added Successfully";
  }
  
  getAllContacts(){
      return this.allContactDetails;
  }
  
  deleteContact(i){
    this.allContactDetails.splice(i, 1);
  }

  getContact(i){
    return this.allContactDetails[i];
  }

  updateContact(i,updatedContact){
    this.allContactDetails[i] = updatedContact;
  }
}

TS
import { Component, OnInit } from '@angular/core';
import { IFavContactSchema } from '../favSchema';
import { FavContactServiceService } from '../fav-contact-service.service';
@Component({
  selector: 'app-favourites-list',
  templateUrl: './favourites-list.component.html',
  styleUrls: ['./favourites-list.component.css']
})
export class FavouritesListComponent implements OnInit {
  key: string = 'first_name'; //set default
  reverse: boolean = false;
  p: number = 1;
  favContactLists:IFavContactSchema[];
  constructor(private favConService:FavContactServiceService) { }
  ngOnInit() {
    this.favContactLists = this.favConService.getAllContacts();

  }
  deleteContact(i:Number){
    this.favConService.deleteContact(i);
  }
  sort(key){
    this.key = key;
    this.reverse = !this.reverse;
  }
}
HTML
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Fav Contacts</h2>
  <nav class="navbar">
      <input class="form-control" type="text" name="search" [(ngModel)]="filter">      
  </nav>
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th (click)="sort('first_name')">Name
            <span class="glyphicon sort-icon" *ngIf="key =='name'" [ngClass]="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
        </th>
        <th (click)="sort('email')">Email</th>
        <th (click)="sort('calling_rate')">Calling Rate</th>
        <th (click)="sort('mobile_number')">Mobile Number</th>
        <th>Actions</th> 
       </tr>
    </thead>
    <tbody *ngIf="favContactLists?.length > 0; else no_record">
      <tr *ngFor="let contact of favContactLists| filter:filter | orderBy: key : reverse| paginate: { itemsPerPage: 5, currentPage: p };let i=index">
        <td>{{ i+1 }}</td>
        <td>{{ contact.first_name  + " " }}{{contact.middle_name ? contact.middle_name : ""}}{{ " " + contact.last_name }}</td>
        <td>{{ contact.email }}</td>
        <td *ngIf="contact.calling_rate == 'frequent'; else non_frequent" >{{ "Frequent" }}</td>
        <ng-template #non_frequent><td>{{ "Non Frequent" }}</td></ng-template>
        <td >{{ contact.mobile_number }}</td>
        <td><a [routerLink]="['/edit', i+1]">
                <span class="glyphicon glyphicon-pencil"></span>
            </a>
            <a (click) = "deleteContact(i)">
                <span class="glyphicon glyphicon-trash"></span>
            </a>
        </td>
       </tr>
      
    </tbody>
    <ng-template #no_record>
      <tbody>
        <td colspan="5" class="active cen" align="center">No Record Found</td>
      </tbody>
    </ng-template>
    <pagination-controls (pageChange)="p = $event"></pagination-controls>
  </table>
</div>

</body>
</html>

我是 Angular 的新手，面临一个小问题。使用 Ng2SearchPipeModule 进行搜索 它适用于字符串中的数据，但不适用于 Number 中的数据。我附上下面的截图...

对于某些搜索场景工作正常，但对于一些不是。请帮忙。

有两张图片，一张是正常搜索，一张是所有记录都在那里，即使它不符合过滤条件

标签： javascriptangular

解决方案

推荐阅读