标签: angular2-pipe

我正在尝试在 html(Angular2) 中使用百分比管道格式化值，我需要没有 % 符号的百分比值

我有2个选择.

一个为Leagues一个为一个Divisions

我想根据所选内容创建一个Pipe过滤器.DivisionsLeague

提供以下数据.如果我Random Beer League只选择TwoFour并且SixPack应该显示为选择的Divisions选项.

leagues = [
  {id: 1, leagueName: 'Recreation League' },
  {id: 2, leagueName: 'Random Beer League' } 
];

divisions = [
  {id: 1, divisionName: 'SoGreen', leagueId: 1, leagueName: 'Recreation League' },
  {id: 2, divisionName: 'Yellow', leagueId: 1, leagueName: 'Recreation League' },
  {id: 3, divisionName: 'TwoFour', leagueId: 2, leagueName: 'Random Beer League' },
  {id: 4, divisionName: 'SixPack', leagueId: 2, leagueName: 'Random …

我想要一个通用字段过滤器,它将过滤器函数作为参数并使用它 filter

import {Injectable, Pipe, PipeTransform} from '@angular/core';

@Pipe({
  name: 'FieldsFilter'
})
@Injectable()
export class FieldsFilter implements PipeTransform {
  transform(fields: any[], args: any[]): any {
    return fields.filter(args[0]);//pass function to filter
  }
}

所以我可以在具有不同过滤功能的多个地方使用它.

如何通过过滤功能？

是否可以在单击按钮时更改/放置管道以格式化 Angular 2 中的特定列？例如，我有一个包含“名称”和“小时”列的表，当我单击按钮时，“小时”显示的数据应转换为天，反之亦然。

<button class="btn btn-secondary" (click)="convertToDays()">Days</button>
<button class="btn btn-secondary" (click)="convertToHours()">Hours</button>

<tbody>
<td>{{availableLeave.hours}}</td>
</tbody>

convertToDays(){
//put pipe to format availableLeave.hours to display as days ex.('48' hours should be displayed as '2' days)
}

convertToHours(){
//will just revert the original formatting of availableLeave.hours which is in hour format
}

我有一个包含Fabrics数组的Angular2网格。这些织物具有诸如颜色或织物类型的特性。现在，网格已全部显示。我需要一些关于颜色和织物类型的复选框的数量以及旁边的数量。仅在单击“应用过滤器”按钮后，网格才会显示过滤的织物。但是，当选中一个复选框时，其他复选框的计数会更改。

例如

有人可以提供一些最有效的见解吗？我现在有所有数据。我将创建管道或过滤服务，还是拥有表单？

** 楷模 **

ProductConfigurationOption是选项选择的整体父项。例如 结构是ConfigurationOption。

配置选项选择是特定的结构，例如Tan Chenille。单个ConfigurationOptionChoice具有许多OptionChoiceProperty。

产品配置选项

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[]
    ) {

    }
}

产品配置选项选择

import { ProductConfiguratorOptionChoiceProperties } from '../Models/product-configurator-option-choice-properties';
import { IProductConfiguratorOptionChoiceProperties …

我有一个线程对象数组,每个线程对象都有属性

unit:number
task:number
subtask:number

我想创建一个管道来过滤这些线程,到目前为止我有一个像下面这样的工作管道.我对它还不是很满意,想问你们是否有更优雅的解决方案？

HTML:

<div class="thread-item" *ngFor="#thread of threadlist | threadPipe:unitPipe:taskPipe:subtaskPipe"></div>

Pipe.ts

export class ThreadPipe implements PipeTransform{

  threadlistCopy:Thread[]=[];

  transform(array:Thread[], [unit,task,subtask]):any{

    //See all Threads
    if(unit == 0 && task == 0 && subtask == 0){
      return array
    }
    //See selected Units only
    if(unit != 0 && task == 0 && subtask == 0){
      this.threadlistCopy=[];
      for (var i = 0; i<array.length;i++){
        if(array[i].unit == unit){
          this.threadlistCopy.push(array[i])
        }
      }
      return this.threadlistCopy
    }
    //See selected Units and Tasks
    if (unit != 0 && …

从Beta升级到RC1后,管道似乎没有正确传递数据.我收到以下信息:

ORIGINAL EXCEPTION: TypeError: Cannot read property '1' of undefined
ORIGINAL STACKTRACE:
TypeError: Cannot read property '1' of undefined

这是一个古老的plunker,但它显示了我在我的应用程序中使用管道的方式. https://plnkr.co/edit/DHLVc0?p=preview

有时我根本没有错误,它会将页面视为没有任何管道.

所以我一直在寻找网络中的这个功能,并没有找到我可以用来将秒转换为可以表示为字符串的年,月,日,小时,分钟和秒的解决方案.

我正在展示产品:

<li *ngFor="let product of products">{{product.id}}</li>

我想限制使用组件属性显示的条目数.是否有内置管道可以做到这一点,或者我应该创建自己的管道？

我是这样看的:

<li *ngFor="let product of products | length[propertyOnComponent]">{{product.id}}</li>

因此,如果propertyOnComponent是3,则只显示3个条目.

是否可以使用管道动态显示数组的长度？这是我的代码：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'lengthOfArray'
})
export class LengthOfArrayPipe implements PipeTransform {

  transform(value: any): number {
    return value.length;
  }

}

我像这样使用它：

成分

listOfIdToExport: any[] = [];

模板

Element numer: {{ listOfIdToExport | lengthOfArray }}

我有一个从该数组中添加或删除元素的函数，问题是管道在发生更改时不会更新数组长度。