Angular 2+: обновление списка из выпадающего списка HTML пользователя

Question

Я использую enum как одно из свойств моей модели для безопасности типов

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. Как можно отразить это в списке? Мне известен класс Observable в 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

Ваш метод получения и установки должен в идеале установить значения для закрытой переменной и установить переменную, используя метод, чтобы дать вам больший контроль над потоком данных.

Пожалуйста, попробуйте следующий код:

// 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
}