如何在JavaScript及Angular 4中实现用户输入价格区间筛选功能？

嘿，作为Angular 4的新手，想做这个价格区间筛选其实挺直观的，我给你一步步捋清楚，跟着做就能搞定！

第一步：搭建组件基础变量 #

首先在你的组件类里定义几个核心变量：原始的商品列表、用户输入的最低/最高价格，还有用来展示的筛选后商品列表。比如这样：

import { Component } from '@angular/core';

@Component({
  selector: 'app-price-filter',
  templateUrl: './price-filter.component.html',
  styleUrls: ['./price-filter.component.css']
})
export class PriceFilterComponent {
  // 模拟的商品数据，你可以换成实际接口返回的数据
  productList = [
    { name: '商品A', price: 50 },
    { name: '商品B', price: 120 },
    { name: '商品C', price: 80 },
    { name: '商品D', price: 200 }
  ];
  filteredProducts = [...this.productList]; // 初始化时显示全部商品
  minPrice: number;
  maxPrice: number;
}

第二步：编写模板（HTML部分） #

接下来在模板里做两个输入框让用户输入价格，再把筛选后的商品列表展示出来。这里用Angular的双向绑定[(ngModel)]来同步输入值，记得要导入FormsModule到你的模块里哦，不然双向绑定用不了！

<div class="price-filter">
  <div>
    <label>最低价格：</label>
    <input type="number" [(ngModel)]="minPrice" (input)="filterProducts()" placeholder="请输入最低价格">
  </div>
  <div>
    <label>最高价格：</label>
    <input type="number" [(ngModel)]="maxPrice" (input)="filterProducts()" placeholder="请输入最高价格">
  </div>

  <h3>筛选后的商品</h3>
  <ul>
    <li *ngFor="let product of filteredProducts">
      {{ product.name }} - ￥{{ product.price }}
    </li>
  </ul>
</div>

第三步：实现筛选逻辑 #

现在写filterProducts()方法，用来根据用户输入的价格区间过滤商品。这里要处理几种情况：比如用户只输入了最低价格、只输入了最高价格，或者两个都输入了，还有用户没输入任何值的时候要显示全部商品。

filterProducts() {
  // 先复制原始列表，避免修改原数据
  let tempProducts = [...this.productList];

  // 处理最低价格筛选
  if (this.minPrice !== undefined && this.minPrice !== null) {
    tempProducts = tempProducts.filter(product => product.price >= this.minPrice);
  }

  // 处理最高价格筛选
  if (this.maxPrice !== undefined && this.maxPrice !== null) {
    tempProducts = tempProducts.filter(product => product.price <= this.maxPrice);
  }

  // 更新筛选后的列表
  this.filteredProducts = tempProducts;
}

一些新手友好的小提示 #

• 别忘了在你的模块（比如AppModule）里导入FormsModule，不然[(ngModel)]会报错：

  import { FormsModule } from '@angular/forms';
  
  @NgModule({
    imports: [
      // 其他导入项
      FormsModule
    ]
  })
  export class AppModule { }
  

• 可以给输入框加一点校验，比如限制只能输入正数，或者当用户输入非数字时提示，避免筛选出错。
• 如果你的商品数据是从后端接口获取的，只需要把productList替换成接口返回的数据就行，筛选逻辑不用改。

这样一套下来，你就能实现用户输入价格区间后自动筛选商品的功能啦，是不是挺简单的？

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