Angular2过滤复选框答案

【问题标题】：Angular2 filtering checkboxesAngular2过滤复选框
【发布时间】：2017-12-30 04:57:40
【问题描述】：

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

例如

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

** 型号 **

ProductConfigurationOption 是选项选择的整体父级。前任。 Fabric 是一个配置选项。

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

产品配置选项.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。

【问题讨论】：

管道可能是执行此操作的方法，如果您添加数据示例，我可以创建一个工作管道作为答案
请显示一些代码。似乎，可能是，您可以将Observable 字段与async 管道一起使用。
每厘米我会提供一些代码。
当你说你想要一个计数 - 它是一个数组，ProductConfigurationOptionChoice.OptionChoiceProperties.length 是你要找的吗？或者你想要一个具有特定值的OptionChoiceProperties 计数？
您使用的是Reactive Form 还是Template Form？

标签： angular typescript angular2-forms angular2-pipe

【解决方案1】：

您可以使用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']、变量（数组）或方法（返回数组）。

要计算可以使用的项目数，也可以使用管道

数管

@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

【讨论】：

fabrickType 如何从复选框接收管道更新？
你可以在我的实例中看到你可以将结构类型绑定到任何变量（或像我一样的方法）

【解决方案2】：

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

在您的织物子数组（颜色、类型等）上运行以下命令以获取计数和不同项目的列表。

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

如果你在你的子数组上运行它（比如，fabrics[0].colors），你最终会得到一个看起来像这样的 obj：

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

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

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

【讨论】：