Question

我有一个包含Fabrics数组的Angular2网格。这些面料具有颜色或面料类型等属性。现在网格显示它们。我需要一些如何为颜色和结构类型设置一系列复选框，并在其旁边显示金额。仅在单击应用过滤器按钮后，网格才会显示已过滤的Fabrics。但是，当选中复选框时，其他复选框会计算更改。

实施例

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

**模特**

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

您可以使用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

Answer 2

您可以使用组件方法。管道也可以工作，但如果使用组件方法使其工作，这是一个例子。

在布料子阵列（颜色，类型等）上运行以下命令以获取计数和不同项目的列表。

text/binary

如果你在你的子阵列上运行它（fabric [0] .colors，让我们说），你最终会得到一个看起来像的obj：

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

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

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

Angular2过滤复选框

2 个答案: