要在Angular 8中实现按类别筛选列表,你可以按照以下步骤进行操作:
创建一个基本的Angular 8项目。如果你已经有一个项目,请跳过此步骤。
在你的Angular项目中创建一个新的组件,用于显示和筛选列表。可以使用以下命令创建一个新的组件:
ng generate component CategoryFilteredList
searchText: string;
selectedCategory: string;
dataList: any[] = [
{ name: 'Item 1', category: 'category1' },
{ name: 'Item 2', category: 'category2' },
{ name: 'Item 3', category: 'category1' },
{ name: 'Item 4', category: 'category3' },
// Add more items here...
];
get filteredList() {
return this.dataList.filter(item => {
const searchTextMatch = !this.searchText || item.name.toLowerCase().includes(this.searchText.toLowerCase());
const categoryMatch = this.selectedCategory === 'all' || item.category === this.selectedCategory;
return searchTextMatch && categoryMatch;
});
}
{{ item.name }} - {{ item.category }}
这就是在Angular 8中按类别筛选列表的解决方法。你可以根据自己的需求进行修改和扩展。