Question

我有一个服务正在检索的硬编码数据。

以及将该数据发送到另一个组件以呈现列表的组件。

我在另一个组件中也有2个html选择。我可以发送选择值。

我想要做的是过滤我从服务中收到的数据选择输出。

这是数据模型：

export interface ProductModel{
  ProductID:number,
  ProductTitle:string,
  Description:string,
  ProductImage:string
  Price:number,
  PriceLabel:string,
  ProductTags:number[]
}

有关过滤器如何工作的说明：我有一系列礼品/物品。每件礼物都有产品标签。当我从i发送标签号码并相应地过滤礼物时。

代码 Gift.Service ，发送数据：

import { Http, Response, Headers, RequestOptions } from "@angular/http";
import { Injectable } from "@angular/core";
import * as data from "./products.json";

import { Observable } from "rxjs/Observable";
import "rxjs/add/operator/map";
import "rxjs/add/operator/catch";

import { ProductModel } from "../models/product.model";

@Injectable()
export class GiftsService {
  constructor(private http: Http) {}

  getStoreList(): ProductModel[] {
    let headers = new Headers({ "Content-Type": "application/json" });
    let options = new RequestOptions({ headers: headers });
    return (<any>data).gifts;
  } 

}

代码 GiftManager ，收集数据：

import { Component, OnInit } from "@angular/core";
import { Observable } from 'rxjs/Observable';
import { GiftsService } from './../../services/gifts.service';

import { ProductModel } from './../../models/product.model';

@Component({
  selector: "gifts-manager",
  template: `
    <div class="manger-container">
      <filter-manager [genderFilter]="genderFilter" [priceFilter]="priceFilter" (filterGifts)="filterGifts($event)"></filter-manager>
      <div *ngIf="gifts ; let giftsList; else loading">
        <gift-list [giftList]="giftsList"></gift-list>
      </div>
      <ng-template #loading>Loading</ng-template>
    </div>
  `,
  styleUrls: ["./gifts-manager.component.css"]
})
export class GiftsManagerComponent implements OnInit {
  gifts:ProductModel[];
  priceFilter:object[];
  genderFilter:object[];

  constructor(private giftsService:GiftsService) {
    this.gifts =  giftsService.getStoreList();
    this.priceFilter = giftsService.getPriceFilter();
    this.genderFilter = giftsService.getGenderFilter();
  }

  ngOnInit() {
  }

  //*********** this is the messy part *********  

  filterGifts(event=""):Observable<ProductModel[]>{
    let tempGifts = this.giftsService.getStoreList();
    if (event === ""){return Observable.of(tempGifts)};
    const filters = Object.values(event);
    const filtersValue = filters.map(filter => filter.value)

    const filteredGifts = [];
    for (var c = 0; c < filtersValue.length; c++) {
        if(filtersValue[c] !== "")
          for (var i = 0; i < tempGifts.length; i++) {
            if(tempGifts[i].ProductTags.filter(tag => tag === filtersValue[c]).length)
            filteredGifts.push(tempGifts[i]);
          }
    }
    console.log(filteredGifts)
    return Observable.of(filteredGifts);
  }
//*************************************************
}

我已经被困在这几个小时，试图使用可观察量并对如何做基本过滤器onnested数组感到困惑，我想我能够过滤。但感觉太乱了。

如何过滤以及如何将过滤的礼物传递给组件列表？

Answer 1

我认为你的礼物是JSON。

好的，我知道这不容易解决。

<div> <input type="text" (keyup)="filterGift($event)" /></div>
<div *ngFor let gift of filter>

在组件中

filterGift(event: string) {
    this.filter = this.gifts.filter(gift =>
        gift.ProductTitle.toLowerCase().indexOf(event.target.value.toLowerCase()) === 0);
}

这就是我能给你举一个例子。

过滤结果

1 个答案: