Angular 角度-基于选定项目搜索数据

我正在尝试根据所选项目搜索数据，现在全局搜索正在为所有项目工作。 假设我选择了移动项目，然后在搜索中键入iPhone11，那么搜索应该只在移动阵列列表中进行。 请任何人帮助并告诉我如何根据所选选项（类别）搜索数据

HTML

总结果-{this.CoffeeItemList.length}}
{{items？.title}
{{items？.content}
${{items？.price}
{{items？.type | slice:15}

TS

搜索关键词：字符串；
咖啡结果：有；
CoffeeItemList:any=[]；
//tslint:禁用下一行：最大行长度
构造函数（私有getDataListingService:DataListingService）{}
ngOnInit（）：void{
此.getGlobalSearchList（“”）；
这个函数是.getAllData（）；
}
getAllData（）{
this.getDataListingService.getAllDataList（）.subscribe（值=>{
this.CoffeeItemList=value.data；
});
}
getGlobalSearchList（类型：字符串）{
this.CoffeeItemList=[]；
this.getDataListingService.getAllDataList（）.subscribe（值=>{
让数据=[]；
data=value.data；
控制台日志（数据）；
for（设i=0；i{
this.CoffeeItemList=value.data；
});
}
}

此服务代码用于搜索数据 smart-search.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { SmartSearchList } from '../shared/models/smartSearchList';

@Injectable({
  providedIn: 'root'
})
export class SmartSearchService {

  baseUrl = 'apiurlhere';

  constructor(private http: HttpClient) { }

  getAllSmartSearchDataLists(): Observable<SmartSearchList> {
    return this.http.get<SmartSearchList>(this.baseUrl);
  }
}

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { DataLists  } from '../shared/models/dataListing';


@Injectable({
  providedIn: 'root'
})
export class DataListingService {
  baseUrl = 'http://infogainpune.com/api/products';

  constructor(private http: HttpClient) { }

  getAllDataLists(): Observable<DataLists> {
    return this.http.get<DataLists>(this.baseUrl);
  }

  searchList(search: string): Observable<DataLists> {
    return this.http.get<DataLists>('search url here' + search);
  }
}

从'@angular/core'导入{Injectable}；
从“rxjs”导入{Observable}；
从'@angular/common/http'导入{HttpClient}；
从“../shared/models/SmartSearchList”导入{SmartSearchList}；
@注射的({
providedIn:'根'
})
导出类SmartSearchService{
baseUrl='apiurlhere'；
构造函数（私有http:HttpClient）{}
GetAllSmartSearchDataList（）：可观察{
返回this.http.get（this.baseUrl）；
}
}

显示产品列表 data-listing.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { SmartSearchList } from '../shared/models/smartSearchList';

@Injectable({
  providedIn: 'root'
})
export class SmartSearchService {

  baseUrl = 'apiurlhere';

  constructor(private http: HttpClient) { }

  getAllSmartSearchDataLists(): Observable<SmartSearchList> {
    return this.http.get<SmartSearchList>(this.baseUrl);
  }
}

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { DataLists  } from '../shared/models/dataListing';


@Injectable({
  providedIn: 'root'
})
export class DataListingService {
  baseUrl = 'http://infogainpune.com/api/products';

  constructor(private http: HttpClient) { }

  getAllDataLists(): Observable<DataLists> {
    return this.http.get<DataLists>(this.baseUrl);
  }

  searchList(search: string): Observable<DataLists> {
    return this.http.get<DataLists>('search url here' + search);
  }
}

从'@angular/core'导入{Injectable}；
从“rxjs”导入{Observable}；
从'@angular/common/http'导入{HttpClient}；
从“../shared/models/dataListing”导入{datalist}；
@注射的({
providedIn:'根'
})
导出类DataListingService{
baseUrl=http://infogainpune.com/api/products';
构造函数（私有http:HttpClient）{}
GetAllDataList（）：可观察{
返回this.http.get（this.baseUrl）；
}
搜索列表（搜索：字符串）：可观察{
返回this.http.get（'search url here'+search）；
}
}

JSON响应

JSON产品响应属性 试试这个， 取一个变量来存储所选类型值

TS

selectedType: string = '';

getGlobalSearchList(type: string) {

    this.selectedType = type;
    this.CoffeeItemList = [];
    this.getDataListingService.getAllDataLists().subscribe(value => {

        let data = [];
        data = value.data;
        console.log(data);
        for (let i = 0; i < data.length - 1; i++) {
            if (data[i].type === type) {
                this.CoffeeItemList.push(data[i]);
            }
        }
    });
}

getSmartSearchValues(search: string) {
    if (search === '' ) {
        this.getGlobalSearchList('');
        return false;
    }
    this.getDataListingService.searchList(search).subscribe(value => {

        let data = [];
        data = value.data;
        this.CoffeeItemList = value.data;

        // check selected type either coffee, mobile or ALL.
        if(this.selectedType && this.selectedType != '') {
            this.CoffeeItemList = [];
            for (let i = 0; i < data.length - 1; i++) {
                if (data[i].type === this.selectedType) {
                    this.CoffeeItemList.push(data[i]);
                }
            }
        }
    });
}

selectedType:string=''；
getGlobalSearchList（类型：字符串）{
this.selectedType=类型；
this.CoffeeItemList=[]；
this.getDataListingService.getAllDataList（）.subscribe（值=>{
让数据=[]；
data=value.data；
控制台日志（数据）；
for（设i=0；i{
让数据=[]；
data=value.data；
this.CoffeeItemList=value.data；
//选中所选类型咖啡、手机或全部。
如果（this.selectedType&&this.selectedType！=''）{
this.CoffeeItemList=[]；
for（设i=0；i

您当前正在进行服务呼叫以进行搜索。你能分享服务代码吗？请发布

CoffeeItemList

@RounakSnehasis的json数据-我已经添加了服务代码。请看一看。@hrdkisback-添加了JSON响应，说明您如何将每个项目与JSON数据中的

iphone11

和

mobile

等类别进行映射？数据中是否有任何属性，如

category

？@hrdkisback-很抱歉，它不适用于特定的类别。它们正在工作。我刚刚从loopOke中删除了length-1。很高兴听到这个消息，您可以用这两种方法重构重复的代码。