以下是一个使用Angular进行类别筛选产品的示例代码:
首先,您需要创建一个产品列表组件,其中包含产品的类别和一个用于筛选产品的下拉菜单。
product-list.component.html:
产品列表
- {{ product.name }}
product-list.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-product-list',
templateUrl: './product-list.component.html',
styleUrls: ['./product-list.component.css']
})
export class ProductListComponent {
selectedCategory: string = '';
products: any[] = [
{ name: '产品1', category: '类别1' },
{ name: '产品2', category: '类别1' },
{ name: '产品3', category: '类别2' },
{ name: '产品4', category: '类别2' },
{ name: '产品5', category: '类别3' }
];
categories: string[] = ['类别1', '类别2', '类别3'];
get filteredProducts() {
return this.selectedCategory ? this.products.filter(product => product.category === this.selectedCategory) : this.products;
}
}
在上面的代码中,我们使用了Angular的双向数据绑定和ngFor指令来实现下拉菜单和产品列表。选中的类别存储在selectedCategory
变量中,通过ngModel
指令与下拉菜单进行绑定。
filteredProducts
是一个计算属性,根据选中的类别来筛选产品列表。如果没有选中类别,则返回所有产品。
这只是一个简单的示例,您可以根据实际需求进行修改和扩展。