Angular2フィルタリングチェックボックス

ファブリックの配列を含むAngular2グリッドがあります。これらのファブリックには、色やファブリックタイプなどのプロパティがあります。現在、グリッドにはそれらがすべて表示されています。色と生地の種類のチェックボックスをいくつか用意し、その横に量を表示する必要があります。グリッドには、フィルターを適用するボタンがクリックされた後にのみ、フィルターされたファブリックが表示されます。ただし、チェックボックスを選択すると、他のチェックボックスの数が変わります。

例

誰かがこれについて最善の方法としていくつかの洞察を提供できますか？私は今のところすべてのデータを持っています。パイプやフィルタリングサービスを作成しますか、それともフォームを作成しますか？

**モデル**

ProductConfigurationOptionは、オプション選択の全体的な親です。例 ファブリックはConfigurationOptionです。

configuration-option-choiceは、TanChenilleなどの特定のファブリックです。個々のConfigurationOptionChoiceには、多くのOptionChoicePropertiesがあります。

product-configuration-option.ts

import { ProductConfigurationOptionChoice } from './product-configuration-option-choice';
import { IProductConfiguratorOptionChoiceProperties } from '../Interfaces/iproduct-configurator-option-choice-properties';
import { IProductConfigurationOptionChoice } from '../Interfaces/iproduct-configuration-option-choice';
import { IProductConfigurationOption } from '../Interfaces/iproduct-configuration-option';

export class ProductConfigurationOption implements IProductConfigurationOption {
   constructor(
        public ConfiguratorID: number,
        public OptionID: number,
        public OptionName: string,
        public OptionDescription: string,
        public OptionSortOrder: number,
        public SKUPartOrdinal: number,
        public ProductConfigurationOptionChoice: IProductConfigurationOptionChoice[],
        public OptionChoicesProperties: IProductConfiguratorOptionChoiceProperties[]
    ) {

    }
}

product-configuration-option-choice.ts

import { ProductConfiguratorOptionChoiceProperties } from '../Models/product-configurator-option-choice-properties';
import { IProductConfiguratorOptionChoiceProperties } from '../Interfaces/iproduct-configurator-option-choice-properties';
import { IProductConfigurationOptionChoice } from '../Interfaces/iproduct-configuration-option-choice';
export class ProductConfigurationOptionChoice implements IProductConfigurationOptionChoice {
    public OptionChoiceID: number;
    public OptionID: number;
    public OptionValue: string;
    public OptionChoiceName: string;
    public OptionChoiceDescription: string;
    public SKUPart: string;
    public ImageURL: string;

    public SortOrder: number;
    public PriceOffset: number;
    public OptionChoiceProperties: IProductConfiguratorOptionChoiceProperties[];
    constructor( ){

    }

     setOptionChoiceProperties(optionProperties: ProductConfiguratorOptionChoiceProperties[]) {
        this.OptionChoiceProperties = optionProperties;
    }
}

product-configurator-option-choice-properties.ts

import { IProductConfiguratorOptionChoiceProperties } from '../Interfaces/iproduct-configurator-option-choice-properties';
export class ProductConfiguratorOptionChoiceProperties implements IProductConfiguratorOptionChoiceProperties {
      constructor(
        public OptionChoiceId: number,
        public PropertyId: number,
        public Name: string,
        public Value: string
    ) {

    }
}

現在、OptionChoicePropertiesを取得してその数を取得し、チェックボックスを作成しようとしています。次に、フィルターが適用されたときにOptionChoicePropertiesの量を動的に変更する方法を理解しようとします。