angular - Angular - 根据所选项目搜索数据

Question

我正在尝试根据所选项目搜索数据，截至目前，全局搜索适用于所有项目。假设如果我选择移动项目然后在搜索中键入 iphone 11 那么搜索应该只在移动阵列列表上进行。谁能帮助并告诉我如何根据所选选项（类别）搜索数据。

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;
    });

  }
}

此服务代码用于搜索数据 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);
  }
}

显示产品 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 响应

JSON 产品响应属性

标签： angulartypescriptapi

Answer 1

试试这个，取一个变量来存储选定的类型值。

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]);
                }
            }
        }
    });
}