标签: angular2-pipe

我有以下模板:

<div *ngFor="let item of myArray | customPipe1 | customPipe2; let l = length">
  Here is the length of my ngFor : {{l}}
</div>

不幸的是,ngFor中不存在长度.我如何解决这个问题,以便在我的ngFor中提供长度？

我目前使用这个管道 {{ product.productPrice | number:'.2-2' }}

结果是1,000,000.00,但我想删除.00 你怎么做？

我试图DatePipe在我的Angular2应用程序中实例化一个对象,以便transform(...)在我正在开发的组件中使用函数.

// ...
import { DatePipe } from '@angular/common';

@Component({...})
export class PanelComponent implements OnInit {
    // ...
    datePipe: DatePipe = new DatePipe(); // Error thrown here
    // ...
}

这段代码在RC5中运行良好.我现在想升级到Angular2最终版本,当我跑收到此错误ng serve或者ng build,

~/tmp/broccoli_type_script_compiler-input_base_path-XitPWaey.tmp/0/src/app/panel/panel.component.ts (33, 24): 
Supplied parameters do not match any signature of call target.

我该如何解决这个问题？还有另一种实例化管道的方法吗？或者Angular是否停止支持在组件内部实例化Pipes？

我在我的一个表单中使用了JQuery输入掩码[(ngModel)],但由于某种原因它们不能一起工作.使用任何一个单独工作完全正常,但组合两个完全中断[(ngModel)]和新输入不会被发送回组件.经过一段时间的努力,我认为使用Angular 2的管道将是一个很好的解决方案,但我无法弄清楚如何让这两个人一起工作.

这是我用来测试管道的一些代码

<input [(ngModel)]="Amount" id="Amount" name="Amount" class="form-control" type="number" autocomplete="off">
<p>Amount: {{Amount | number:'1.2-2'}}</p>

如果我输入12345,<p>下面的标签将显示12,345.00,这正是我想要它过滤的方式,但我不想让过滤量低于输入,我希望输入本身显示12,345.00.添加相同的管道到ngModel这样:[(ngModel)]="Amount | number:'1.2-2'"给我以下错误.

分析器错误:[Amount |中的第10列的动作表达式中没有管道 编号: '1.2-2'= $事件]

如何在输入中使用管道(或输入掩码)[(ngModel)]？

我正在学习Angular2,我想格式化一个加上一千个逗号分隔符的数字.据我所知,这可以使用Pipes完成,问题是我想在js文件中以编程方式格式化数字,而不是在html中(像var | number一样).

首先,我意识到没有可以使用的NumberPipe独立管道(如果我错了,请纠正我)最相似的是@ angular2/common中的CurrencyPipe.所以我有这样的事情:

import { Component } from '@angular/core';
import { CurrencyPipe } from '@angular/common';

@Component({
  templateUrl: 'test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent {
    public myNumber = 1000;

    constructor(private currencyPipe: CurrencyPipe) {    
        var formatted = this.currencyPipe().transform(this.myNumber, 'MXN', true); // Is this correct?
    }

}

但它会引发以下错误: 未处理的Promise拒绝:没有提供CurrencyPipe!; 区域:棱角分明; ......

我究竟做错了什么？

提前致谢.

问候

我正在使用角度2和货币管道构建应用程序,但我找不到根据ISO值获取货币符号的方法,没有任何数字.我的意思是我只想要符号而不设置要格式化的数字.

正常情况$3.00 我只想要而$symbol不是数字

瑞士德语的数字格式类似于"100'000.00"(不是"100,000.00").我怎么能改变呢？我尝试将number_pipe.js中的设置从en-US更改为de-CH但没有成功.

var defaultLocale: string = 'de-CH';

有解决方法还是我必须实现自己的管道？

我很乐意帮助将内置管道导入角度为2的自定义管道.

这是我的代码:

@Pipe({ name: 'tablePipe' })

export class TablePipe implements PipeTransform {
    constructor(private decimalPipe: DecimalPipe) {

    }
    transform(field: any, format: Format, formatArg: string): any {
        let formattedField: any = ''
        switch (format) {
            case 'number':
                {
                    formattedField = this.decimalPipe.transform(field, formatArg);
                    break;
                }
        }
        return formattedField;
    }
}

export type Format = 'date' | 'string' | 'number';

这是我得到的错误:

EXCEPTION:未捕获(承诺):错误:没有DecimalPipe的提供者!

在组件中导入常规自定义管道时,我使用:

@Component({
  ...,
  pipes: [MyCustomPipe],
  ...
})

我想写一些数字<input>并{{}}通过管道将其动态显示为十进制内部.它会引发异常.这是我的代码:

app.template.html:

<h1>amount = {{amount|number:'1.2-2'}}</h1>
<input [(ngModel)]="amount"/>

app.component.ts:

import {Component} from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: 'app/app.template.html'
})
export class AppComponent {
  private amount:number;
}

Plunker:http://plnkr.co/edit/I7ynnwBX4DWJfHNPIPRu？p =preview

将任何数字写入输入并查看控制台中抛出的异常.

编辑:

根据rinukkusu建议的工作代码:

app.template.html:

<h1>amount = {{amount|number:'1.2-2'}}</h1>
<input [ngModel]="amount" (ngModelChange)="onChange($event)"/>

app.component.ts:

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: 'app/app.template.html'
})
export class AppComponent {
  private amount:number;

  onChange($event) {
    this.amount = +$event;
  }
}

这+旁边$event是非常重要的,是什么让从字符串转换到一些可能的!

有人可以解释一下Angular Filters和Angular2 Pipes之间的概念差异吗？它们是为了相同的目的而建造的，不是吗？引擎盖下有什么区别吗？

<div>{{user.created | dateFormat }}</div>

甚至语法也完全相同。