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 для поиска. Работает нормально для данных в строке, но не для данных в номере.Я прилагаю скриншот ниже ...
Для некоторых сценариев поиска работает нормально, а для некоторых нет.Пожалуйста, помогите.
Есть два изображения: одно с обычным поиском и одно, в котором есть все записи, даже если они не соответствуют критериям фильтрации