How to angular7 pipe filter data in array from API observabl

Im trying to create a filter for my stories. I subscribe to the API call, and i get the data as an array of objects. I get this error, when im typing in the filterings. I've only included the relevant parts, but i can provide more if needed. Im not that great to Pipes in Angular 4, so any tips would be helpful! Thank you.

import { Component, OnInit } from '@angular/core';
import {YeucauService} from 'src/app/Shared/services/yeucau.service';
import { sanpham } from 'src/app/Shared/models/sanpham';
@Component({
selector: 'app-yeucau',
templateUrl: './yeucau.component.html',
styleUrls: ['./yeucau.component.css']
})
export class YeucauComponent implements OnInit {
showDropDown = false;
name:string;
public sanpham=[];
constructor(public yeucauService:YeucauService) { }
ngOnInit() {
this.yeucauService.GetAllsanpham().subscribe(data=>this.sanpham=data);
}
selectValue(value:sanpham) {
this.name=value.tensanpham;
}
closeDropDown() {
this.showDropDown = !this.showDropDown;
}
openDropDown() {
this.showDropDown = !this.showDropDown;
}
}
"margin-left: 250px" class="table-no-bordered">
"text" placeholder="Search for a state" [(ngModel)]="name" (click)="openDropDown()" class="form-control">
"closeDropDown()">
"showDropDown" class="search-drop-down">
"selectValue(s)" class="search-results" *ngFor="let s of sanpham| test01:name">
{{s.tensanpham}}
a>
div>
div>
div>
table>
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'test01'
})
export class Test01Pipe implements PipeTransform {
transform( getsanpham:any[],tensanpham:string): any{
if(!tensanpham)
{
return getsanpham;
}else{
if(tensanpham)
{
getsanpham = getsanpham.filter(x=>x.tensanpham.toLowerCase().indexOf(tensanpham.toLowerCase())!==-1);
}
}
return getsanpham;
}
}

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Muthu Kumar7y ago
You need change some minor changes from your code.
Because you don't have checked null value in your x.tensanpham.

Here is an example for check null and return value based on query.
getsanpham = getsanpham.filter(x=>
{
if (x.tensanpham && x.tensanpham.toLowerCase().includes(tensanpham.toLowerCase())) {
       return true;
  }
return false;
}