1
Answer

How to angular7 pipe filter data in array from API observabl

Tu Nguyenduy

Tu Nguyenduy
6y
6.1k
1
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.
 
  1. import { Component, OnInit } from '@angular/core';  
  2. import {YeucauService} from 'src/app/Shared/services/yeucau.service';  
  3. import { sanpham } from 'src/app/Shared/models/sanpham';  
  4.   
  5. @Component({  
  6. selector: 'app-yeucau',  
  7. templateUrl: './yeucau.component.html',  
  8. styleUrls: ['./yeucau.component.css']  
  9. })  
  10. export class YeucauComponent implements OnInit {  
  11. showDropDown = false;  
  12. name:string;  
  13.   
  14. public sanpham=[];  
  15.   
  16. constructor(public yeucauService:YeucauService) { }  
  17.   
  18. ngOnInit() {  
  19. this.yeucauService.GetAllsanpham().subscribe(data=>this.sanpham=data);  
  20. }  
  21. selectValue(value:sanpham) {  
  22. this.name=value.tensanpham;  
  23. }  
  24. closeDropDown() {  
  25. this.showDropDown = !this.showDropDown;  
  26. }  
  27. openDropDown() {  
  28. this.showDropDown = !this.showDropDown;  
  29. }  
  30. }  
  31. <table style="margin-left: 250px" class="table-no-bordered">  
  32. <input type="text" placeholder="Search for a state" [(ngModel)]="name" (click)="openDropDown()" class="form-control">  
  33.   
  34. <div (click)="closeDropDown()">  
  35. <div *ngIf="showDropDown" class="search-drop-down">  
  36. <div (click)="selectValue(s)" class="search-results" *ngFor="let s of sanpham| test01:name">  
  37. <a>  
  38. {{s.tensanpham}}  
  39. a>  
  40. div>  
  41. div>  
  42. div>  
  43. table>  
  44. import { Pipe, PipeTransform } from '@angular/core';  
  45.   
  46. @Pipe({  
  47. name: 'test01'  
  48. })  
  49. export class Test01Pipe implements PipeTransform {  
  50.   
  51. transform( getsanpham:any[],tensanpham:string): any{  
  52. if(!tensanpham)  
  53. {  
  54. return getsanpham;  
  55. }else{  
  56. if(tensanpham)  
  57. {  
  58. getsanpham = getsanpham.filter(x=>x.tensanpham.toLowerCase().indexOf(tensanpham.toLowerCase())!==-1);  
  59. }  
  60. }  
  61. return getsanpham;  
  62. }  
  63.   
  64. }  
Answers (1)
Next Recommended Forum