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中的Observable类，但是似乎找不到简单的教程来正确使用它。

    <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应该设置一个私有变量的值，并使用一种方法设置该变量，从而使您可以更好地控制数据流。

请尝试以下代码：

androiddebugkey, 2017/9/24, PrivateKeyEntry,
(SHA1): B5:E0:B6:51:92:27:09:2E:C2:6A:BF:BF:5F:94:82:C5:2E:BF:12:08

Angular 2+：从“用户HTML”下拉列表中更新列表

1 个答案: