Angular 2+:从用户 HTML 下拉选择中更新列表

Question

我正在使用枚举作为类型安全的模型属性之一

export enum Category{
Skin,    
Lips,
BodyCare,
Suncare
}

我的基本模型是这样的：

import { Category } from './category';
export class Item {
constructor(
public category?: Category,
public name?: string,
public description?: string,
public imageURL?: string,
public price?: number) { }
}

然后将 Item 类注入到 ItemList 类(由于大小而未显示(中，该类又被注入到此 ItemRepository 类中。 ItemList 包含一个项目数组和一个getAllListedItems(): Item[]方法。 ItemRepository 反过来包含获取项目列表中所有项目的方法，或者仅获取基于选定类别的项目

的方法。

import { Injectable } from "@angular/core";
import { Item } from "./item";
import { ItemList } from "./item.list";
import { Category } from "./category";
@Injectable()
export class ItemRepository {
private itemList : Item[]
constructor(repo: ItemList){
this.itemList = repo.getAllListedItems();
}
public getAllItems(): Item[] {
return this.itemList;
}
public getItemsByCategory(category : Category){
return this.itemList.filter(item => item.category == category )
}
public getCategories(): Array<string>{        
return Object.keys(Category).filter(cat => isNaN(cat as any))
}
}

这是组件。

它包含一个方法，用于获取用于填充模板中的下拉框的类别，以及用于基于"selectedCategory"属性填充列表的项，该属性已默认为 null。

import { Component } from '@angular/core';
import { Item } from '../repo/item';
import { ItemRepository } from '../repo/item.repository';
import { Category } from '../repo/category';

@Component({
selector: 'shop',
templateUrl: './shop.component.html',
styleUrls: ['./shop.component.css']
})
export class ShopComponent{ 
private shopItems : ItemRepository    
private selectedCategory : Category = null;
constructor(shopItems: ItemRepository){ 
this.shopItems = shopItems        
}
get items(): Item[] { 
return (this.selectedCategory == null)? this.shopItems.getAllItems() : this.shopItems.getItemsByCategory(this.selectedCategory);
}
get categories() : Array<string> { 
return this.shopItems.getCategories();
}
changeCategory(userSelectedCategory?) {
this.selectedCategory = userSelectedCategory;
}

}

我正在尝试使此处的模板根据所选下拉菜单中的选项填充列表。选择一个选项会在组件中调用 changeCategory(( 以更改 selectedCategory。如何在列表中反映这一点？我知道 Angular 中的可观察类，但似乎找不到一个简单的教程来正确使用它。

<div class="container-fluid">
<div class="row" id="shop-controls">
<section class="col-xs-6" id="filter-control">
Filter By:
<select>
<option value="none" (click)="changeCategory()">No Filter</option>
<option *ngFor="let cat of categories; let i = index" value="{{cat}} " (click)="changeCategory(i + 1)" >{{cat}}</option>
</select>
</section>
<section class="col-xs-6" id="sort-control">
Sort By:
<select>
<option value="name">Name</option>
<option value="priceasc">Price Asc.</option>
<option value="pricedesc">Price Desc.</option>
</select>
</section>
</div>
<div class="row product-block" *ngFor="let item of items">
<div class="col-xs-4 col-sm-5 product-img-col">
<img class="img-responsive " [src]="item.imageURL">
</div>
<div class="col-xs-8 col-sm-7 product-stats-col">
<h3>
<span id="product-name">{{item.name}}</span>
</h3>
<p>
<span id="product-description">{{item.description}}</span>
</p>
<h3>
<span id="product-price">{{item.price | currency:'USD':true:'1.2-2'}}</span>
</h3>
</div>
</div>
</div>

谢谢

Answer 1

理想情况下，您的 getter 和 setter 应该为私有变量设置值，并使用方法设置变量，以便更好地控制数据流。

请尝试以下代码：

// Private variable to hold the item list
private _items: Item[];
// Load the list on component initialization
ngOnInit() {
this.getItems();
}
get items(): Item[] {
return this._items; // Return the private variable
}
// Private method to initialize the item list
private getItems() {
this._items = (this.selectedCategory == null) ?
this.shopItems.getAllItems() :
this.shopItems.getItemsByCategory(this.selectedCategory);
}
changeCategory(userSelectedCategory?) {
this.selectedCategory = userSelectedCategory;
this.getItems(); // this will refresh the item list
}