Angular - 根据选择的类别筛选产品列表
创始人
2024-10-14 16:32:19
0次

在Angular中，您可以使用过滤器来根据选择的类别筛选产品列表。下面是一个示例代码，演示了如何使用Angular的过滤器来实现此功能。

首先，在您的组件中，您需要定义一个用于存储产品列表的数组和一个用于存储选择的类别的变量。例如：

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

@Component({
  selector: 'app-product-list',
  template: `
    

    

      
Filtered Products:

      
    
        
  • {{product}}
    • 
      

    

  `,
})
export class ProductListComponent {
  categories = ['Category 1', 'Category 2', 'Category 3'];
  selectedCategory: string;
  products = ['Product 1', 'Product 2', 'Product 3', 'Product 4'];

  get filteredProducts() {
    if (this.selectedCategory) {
      return this.products.filter(product =>
        product.includes(this.selectedCategory)
      );
    } else {
      return this.products;
    }
  }
}

在上面的示例中，我们使用ngModel指令绑定selectedCategory变量到