Angular2 过滤复选框

Question

我有一个包含 Fabrics 数组的 Angular2 网格。这些面料具有颜色或面料类型等属性。现在网格将它们全部显示出来。我需要一些关于颜色和织物类型的一系列复选框以及旁边出现的数量的方法。只有在单击应用过滤器按钮后，网格才会显示过滤后的面料。然而，当一个复选框被选中时，其他复选框的计数会发生变化。

例如

有人可以提供一些关于如何最好地解决这个问题的见解吗？我现在有所有的数据。我会创建一个管道或过滤服务，还是有一个表单？

** 型号 **

ProductConfigurationOption 是选项选择的总父项。前任。 Fabric 是一个 ConfigurationOption。

配置选项选择特定的面料，例如 Tan Chenille。一个单独的 ConfigurationOptionChoice 有很多 OptionChoiceProperties。

产品配置-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[]
    ) {

    }
}

产品配置选项-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;
    }
}

产品配置器选项-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 的数量。

Answer 1

您可以为此使用组件方法。管道也可以工作，但这里有一个使用组件方法让它工作的例子。

运行您的面料子阵列（颜色、类型等）上的以下内容，以获取计数和不同项目的列表。

var obj = { };
for (var i = 0, j = this.fabrics[0].colors.length; i < j; i++) {
   obj[this.fabrics[0].colors[i]] = (obj[this.fabrics[0].colors[i]] || 0) + 1;
}

如果你运行在你的子数组（织物[0].colors，比方说）上，你最终会得到一个看起来像这样的对象：

{
  black: 5,
  orange: 2,
  green: 8
}

您也可以运行在您的织物上的 for 循环中这样做，但总体思路仍然成立。获得对象后，您需要将其转换为 ngFor 的数组（如果愿意，还可以转换为 ngModel）。

有关如何在对象上迭代 ngFor 的示例，请查看 this plunker。

Answer 2

您可以使用 pipe 来过滤您的项目数组

过滤管

@Pipe({name: 'fabricType'})
export class FabricTypePipe implements PipeTransform {
  transform(fabrics: any[], fabricTypes: string[]): any[] {
    if (!fabricTypes || fabricTypes.length === 0) return fabrics;
    return fabrics.filter(fabric => fabricTypes.includes(fabric.type));
  }
}

模板

<div *ngFor="let colour of fabricColours">
  <input type="checkbox" [(ngModel)]="colour.selected" />{{fabrics | fabricType: types | countColour: colour.name}} {{colour.name}}
</div>

<div *ngFor="let fabric of fabrics | fabricType: types">{{fabric.name}}</div>

其中 types 可以是静态的，例如 ['weave','phur']，一个变量（数组）或一个方法（returns 一个数组）。

要计算您可以使用的项目数量，还可以使用管道

管数

@Pipe({name: 'countColour'})
export class CountColourPipe implements PipeTransform {
  transform(fabrics: any[], colour: string): number {
    if (!fabrics || fabrics.length === 0) return 0;
    return fabrics.reduce((count, fabric) => fabric.colour === colour ? count + 1 : count, 0);
  }
}

Gif 显示计数变化

Live plunker example

Angular2 过滤复选框

Angular2 filtering checkboxes

typescript

angular2-forms

angular2-pipe

angular