如何在Angular 4中实现女装网站的多条件商品筛选？

Hey Archana! Let's get that filtering functionality up and running smoothly. Your existing setup has the foundation with the sidebar filters, but we need to add the logic to actually filter the product list when a user clicks a color, size, or sleeve length option. Here's how to tweak your code step by step:

Step 1: Add Filter State & Filtered Products Variable #

First, we'll track active filter selections and create a variable to hold the filtered product list. Update your AppComponent class:

export class AppComponent implements OnInit {
  constructor(private dataservice:DataserviceService,private global: AppGlobals){}
  
  httpdata: any[] = [];
  filteredProducts: any[] = [];
  colours: any[] = [];
  sleeve: any[] = [];
  length: any[] = [];
  // Track active filters - null means no filter selected for that category
  activeFilters = {
    color: null,
    sleeveLength: null,
    size: null
  };

  ngOnInit() {
    // Fetch products and initialize filtered list
    this.dataservice.getApparel(this.global.AppUrl +'getRecommendations?client=web&call_tag=stylemachine&size=15&position=0&attempt=0&user=5724&project=2226&collection=200&category=16&client-tag=women_apparels')
      .subscribe(data => {
        this.httpdata = data;
        this.filteredProducts = [...this.httpdata];
      });
    
    // Fetch filter options (note: you can optimize these to a single API call if possible!)
    this.dataservice.getFilter(this.global.AppUrl +'availableFilters?client=web&category=16')
      .subscribe(colours => this.colours=colours);
    this.dataservice.getSleeve(this.global.AppUrl +'availableFilters?client=web&category=16')
      .subscribe(sleeve => this.sleeve=sleeve);
    this.dataservice.getLength(this.global.AppUrl +'availableFilters?client=web&category=16')
      .subscribe(length => this.length=length);
  }

Step 2: Add Filter Logic Method #

Next, create a method to update the active filter and re-filter the product list. This handles single-filter selection (clicking a new option replaces the existing filter for that category):

setFilter(filterType: string, value: any) {
    // Update the active filter for the selected category
    this.activeFilters[filterType] = value.title;
    
    // Reset other filters if you want only one active filter at a time (remove these lines for multi-filter support)
    if (filterType !== 'color') this.activeFilters.color = null;
    if (filterType !== 'sleeveLength') this.activeFilters.sleeveLength = null;
    if (filterType !== 'size') this.activeFilters.size = null;
    
    // Filter products based on active filters
    this.filteredProducts = this.httpdata.filter(product => {
      // Match product properties to your API's response (adjust names if needed!)
      if (this.activeFilters.color && product.color !== this.activeFilters.color) return false;
      if (this.activeFilters.sleeveLength && product.sleeve_length !== this.activeFilters.sleeveLength) return false;
      if (this.activeFilters.size && product.size !== this.activeFilters.size) return false;
      return true;
    });
  }
}

Note: Double-check that the product properties (color, sleeve_length, size) match exactly what your API returns—adjust the names if they differ!

Step 3: Update Template to Use Filtered Products & Add Click Events #

Modify your app.component.html to call the setFilter method when a filter option is clicked, and display the filtered product list:

<div class="col-md-6" id="sidebar">
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link" routerlink="#submenu" data-toggle="collapse" (click)="toggle1()" data-target="#submenu">
        Color 
        <mat-icon class="pull-right" >{{icon1 ? 'remove' : 'add' }}</mat-icon>
      </a>
      <div class="collapse" id="submenu" aria-expanded="false">
        <ul class="nav" *ngFor="let colour of colours ">
          <li class="nav-item">
            <a class="nav-link" (click)="setFilter('color', colour)" routerlink="/">
              {{colour.title}}
            </a>
          </li>
        </ul>
      </div>
    </li>
    <li class="nav-item">
      <a class="nav-link" routerlink="#submenu2" data-toggle="collapse" data-target="#submenu2">
        sleeve-length 
        <mat-icon class="pull-right" >add</mat-icon>
      </a>
      <div class="collapse" id="submenu2" aria-expanded="false">
        <ul class="nav" *ngFor="let s of sleeve">
          <li class="nav-item">
            <a class="nav-link" id={{s.id}} (click)="setFilter('sleeveLength', s)" routerlink="/">
              {{s.title}}
            </a>
          </li>
        </ul>
      </div>
    </li>
    <li class="nav-item">
      <a class="nav-link" routerlink="#submenu3" data-toggle="collapse" data-target="#submenu3">
        sizes
        <mat-icon class="pull-right" >add</mat-icon>
      </a>
      <div class="collapse" id="submenu3" aria-expanded="false">
        <ul class="nav" *ngFor="let size of length">
          <li class="nav-item">
            <a class="nav-link" id={{size.id}} (click)="setFilter('size', size)" routerlink="/">
              {{size.title}}
            </a>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</div>

<!-- Use filteredProducts instead of httpdata to show only matching items -->
<div class="col-sm-6 col-md-4" *ngFor="let x of filteredProducts; let i = index; ">
  <div class="panel panel-default">
    <div class="panel-body">
      <img src="{{x.product_image}}" height="300px" width="200px">
    </div>
  </div>
</div>

Extra Tips #

• Multi-Filter Support: If you want users to select multiple filters (e.g., blue AND XL), remove the lines in setFilter that reset other filters. The existing logic will automatically combine multiple conditions.
• Active Filter Highlighting: Add a CSS class (like active-filter) to selected options by checking if colour.title === activeFilters.color in the template—this helps users see which filter is active.
• API Optimization: You’re currently making three separate calls to availableFilters. If your API allows, modify this to a single call that returns all filter categories to reduce network requests.

内容的提问来源于stack exchange，提问作者Archana R