Angular - 根据所选项目搜索数据
[英] Angular - search data based on selected item
本文介绍了Angular - 根据所选项目搜索数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试根据所选项目搜索数据，截至目前，全局搜索适用于所有项目.假设如果我选择移动项目，然后在搜索中输入 iphone 11，那么搜索应该只在移动阵列列表上进行.任何人都可以帮助并告诉我如何根据所选选项(类别)搜索数据.
HTML
<div class="mt-4"><div class="form-group has-search"><span class="fa fa-search form-control-feedback"></span><input type="text" class="form-control" [(ngModel)]="searchKeywords" (keyup)="getSmartSearchValues(searchKeywords)" placeholder="在这里搜索">
<!-- 导航标签 --><ul class="nav nav-tabs mt-3" role="tablist"><li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#list" (click)="getAllData()">All</a><li class="nav-item"><a class="nav-link" data-toggle="tab" href="#list" (click)="getGlobalSearchList('DancingGoatMvc-Coffee')">Coffee</a><li class="nav-item"><a class="nav-link" data-toggle="tab" href="#list" (click)="getGlobalSearchList('DancingGoatMvc-Brewer')">Brewer</a><li class="nav-item"><a class="nav-link" data-toggle="tab" href="#list" (click)="getGlobalSearchList('DancingGoatMvc-Mobile')">Mobile</a><li class="nav-item"><a class="nav-link" data-toggle="tab" href="#list" (click)="getGlobalSearchList('DancingGoatMvc-Laptop')">Laptop</a><!-- 标签窗格--><div class="tab-content"><div class="col p-0"><h5 class="mt-2">总结果 - {{this.CoffeeItemList.length}} 产品</h5>
<div id="menu1" class="tab-pane container active in"><div class="row"><div class="card col-3" *ngFor="let items of CoffeeItemList"><div class="card-body"><h5 class="card-title">{{items?.title }}</h5><div class="img-box"><img src="http://infogainpune.com{{items.image |slice:1}}" class="w-100" onerror="this.src='https://thestonecafe.com/saved/noImageAvailable.gif';"alt="..."/>
<p class="card-text">{{items?.content}}</p><h4 class="card-text item-pris">${{items?.price}}</h4><h5 class="card-text item-type">{{items?.type |切片:15}}
<div *ngIf="!CoffeeItemList?.length" class="mt-5 text-center"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRMp-5DU0H4U_joMB6heA3nMMcUZe8EjqMqb0nVRql4CbTWSi6V"/>
TS
searchKeywords:字符串；咖啡结果:任何；CoffeeItemList: any = [];//tslint:disable-next-line:max-line-length构造函数(私有 getDataListingService:DataListingService){}ngOnInit(): 无效 {this.getGlobalSearchList('');this.getAllData();}获取所有数据(){this.getDataListingService.getAllDataLists().subscribe(value => {this.CoffeeItemList = value.data;});}getGlobalSearchList(类型:字符串){this.CoffeeItemList = [];this.getDataListingService.getAllDataLists().subscribe(value => {让数据 = [];数据 = 值.数据；控制台日志(数据)；for (let i = 0; i < data.length - 1; i++) {if (data[i].type === type) {this.CoffeeItemList.push(data[i]);}}});}getSmartSearchValues(搜索:字符串){如果(搜索 === '' ){this.getGlobalSearchList('');返回假；}this.getDataListingService.searchList(search).subscribe(value => {this.CoffeeItemList = value.data;});}}
此服务代码用于搜索数据smart-search.service.ts
import { Injectable } from '@angular/core';从'rxjs'导入{可观察}；从'@angular/common/http' 导入 { HttpClient };从'../shared/models/smartSearchList'导入{SmartSearchList}；@Injectable({提供在:'根'})导出类 SmartSearchService {baseUrl = 'apiurlhere';构造函数(私有http:HttpClient){}getAllSmartSearchDataLists(): Observable{返回 this.http.get(this.baseUrl);}}
显示产品列表数据列表.service.ts
import { Injectable } from '@angular/core';从 'rxjs' 导入 { Observable };从'@angular/common/http' 导入 { HttpClient };从'../shared/models/dataListing'导入{数据列表}；@Injectable({提供在:'根'})导出类 DataListingService {baseUrl = 'http://infogainpune.com/api/products';构造函数(私有http:HttpClient){}getAllDataLists(): Observable{返回 this.http.get(this.baseUrl);}searchList(search: string): Observable{return this.http.get('search url here' + search);}}
JSON 响应
JSON 产品响应属性
解决方案
试试这个，取一个变量来存储选择的类型值.
TS
selectedType: string = '';getGlobalSearchList(类型:字符串){this.selectedType = 类型；this.CoffeeItemList = [];this.getDataListingService.getAllDataLists().subscribe(value => {让数据 = [];数据 = 值.数据；控制台日志(数据)；for (let i = 0; i < data.length - 1; i++) {if (data[i].type === type) {this.CoffeeItemList.push(data[i]);}}});}getSmartSearchValues(搜索:字符串){如果(搜索 === '' ){this.getGlobalSearchList('');返回假；}this.getDataListingService.searchList(search).subscribe(value => {让数据 = [];数据 = 值.数据；this.CoffeeItemList = value.data;//检查选定的类型，咖啡、手机或 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]);}}}});}
I am trying to search data depending upon selected item, as of now global search is working for all items.
suppose if i select mobile item and then type iphone 11 in search then search should be done only on mobile array list.
Can anyone please help and tell me How to search data on basis of selected option (category).
HTML
<div class="container">
<div class="mt-4">
<div class="form-group has-search">
<span class="fa fa-search form-control-feedback"></span>
<input type="text" class="form-control" [(ngModel)]="searchKeywords" (keyup)="getSmartSearchValues(searchKeywords)" placeholder="Search here">
</div>
</div>
<!-- Nav tabs -->
<ul class="nav nav-tabs mt-3" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#list" (click)="getAllData()">All</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#list" (click)="getGlobalSearchList('DancingGoatMvc-Coffee')">Coffee</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#list" (click)="getGlobalSearchList('DancingGoatMvc-Brewer')">Brewer</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#list" (click)="getGlobalSearchList('DancingGoatMvc-Mobile')">Mobile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#list" (click)="getGlobalSearchList('DancingGoatMvc-Laptop')">Laptop</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="col p-0">
<h5 class="mt-2">Total Results - {{this.CoffeeItemList.length}} Products</h5>
</div>
<div id="menu1" class="tab-pane container active in">
<div class="row">
<div class="card col-3" *ngFor="let items of CoffeeItemList">
<div class="card-body">
<h5 class="card-title">{{items?.title }}</h5>
<div class="img-box">
<img src="http://infogainpune.com{{items.image |slice:1}}" class="w-100" onerror="this.src='https://thestonecafe.com/saved/noImageAvailable.gif';" alt="..." />
</div>
<p class="card-text">{{items?.content}}</p>
<h4 class="card-text item-prics">${{items?.price}}</h4>
<h5 class="card-text item-type"> {{items?.type | slice:15}}</h5>
</div>
</div>
</div>
</div>
<div *ngIf="! CoffeeItemList?.length" class="mt-5 text-center">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRMp-5DU0H4U_joMB6heA3nMMcUZe8EjqMqb0nVRql4CbTWSi6V"/>
</div>
</div>
</div>
TS
searchKeywords: string;
coffeeResults: any;
CoffeeItemList: any = [];
// tslint:disable-next-line:max-line-length
constructor(private getDataListingService: DataListingService) {}
ngOnInit(): void {
this.getGlobalSearchList('');
this.getAllData();
}
getAllData() {
this.getDataListingService.getAllDataLists().subscribe(value => {
this.CoffeeItemList = value.data;
});
}
getGlobalSearchList(type: string) {
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 => {
this.CoffeeItemList = value.data;
});
}
}
This service code is for searching 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);
}
}
Displaying list of product
data-listing.service.ts
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);
}
}
JSON Response
JSON Product response attributes
解决方案
Try this,
Take one variable to store selected type value.
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]);
}
}
}
});
}
这篇关于Angular - 根据所选项目搜索数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
