Pipe поиск(фильтрация) в angular

Вопрос-ответ JavaScript
1

не получается правильно реализовать фильтрацию в pipe, задача: при вводе в поле числа(id) нужно вывести соответствующую информацию о студентах. введите сюда описание изображения

т.е. когда ввожу 2 должен вывестись только студент с соответствующим id

//app.components.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
      people:object[]=[
    {id:1 ,name:'A',surname:'A',age:24},
    {id:2 ,name:'B',surname:'B',age:25},
    {id:3 ,name:'C',surname:'C',age:26},
    {id:4 ,name:'D',surname:'D',age:27},
    {id:5 ,name:'E',surname:'E',age:28},
    {id:6 ,name:'F',surname:'F',age:29},
    {id:7 ,name:'G',surname:'G',age:30},
    {id:8 ,name:'H',surname:'H',age:31},
    {id:9 ,name:'I',surname:'I',age:32},
    {id:10 ,name:'J',surname:'J',age:33},
    {id:11 ,name:'K',surname:'K',age:34},
    {id:12 ,name:'L',surname:'L',age:35},
     
  ]
  
}

//pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'pipfil'
})
export class PipfilPipe implements PipeTransform {

 transform(users, value){
    return !value?users:users.filter(user=>user.id.toString().includes(value))
}
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container text-center">
   
   <div class="row">
    <div class="col-md-12">
      <input [(ngModel)]="searchId" placeholder="search by ID">
       <table class="table table-dark table-bordered">
        <thead>
          <tr>
            <th>#</th>
             <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of people | pipfil:searchId">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.surname}}</td>
            <td>{{item.age}}</td>
          </tr>
        </tbody>
       </table>
    </div>
 </div>
2

Попробуй поменять условие фильтрации. .includes находит включение подстроки в строку (что мы видим на скриншоте 2 - включается в 2 и 12). Замени на строгое равенство.

3

спасибо, сделал таким способом, всё сработало

return !value?users:users.filter(user=>{
      if(user.id==value){
        return user
      }
    })
4

Можно опустить return и вернуть только булевое значение. А так же рекомендую всегда использовать строгое сравнение (чтобы сингализировать читающему что у тебя все типы под контролем и ты понимаешь что делаешь):

return !value ? users : users.filter(user => user.id === value)