有人可以解释一下Angular Filters和Angular2 Pipes之间的概念差异吗？它们是为了相同的目的而建造的，不是吗？引擎盖下有什么区别吗？
<div>{{user.created | dateFormat }}</div>
甚至语法也完全相同。
试图学习有关在Angular 2中进行过滤和排序的知识。我似乎找不到任何合适的资源，而且我被困在如何使用索引以相反的顺序对ngFor输出进行排序。我写了下面的管道，它使我不断发现错误，而不是函数。
@Pipe({
name: 'reverse'
})
export class ReversePipe implements PipeTransform {
transform(arr) {
var copy = arr.slice();
return copy.reverse();
}
}
我的ngfor看起来像这样。
<div class="table-row generic" *ngFor="let advert of activeAdverts | reverse let i = index;" [attr.data-index]="i" (click)="viewAd(advert.title)">
<div class="table-cell white-text">{{ i+1 }}</div>
<div class="table-cell white-text">{{advert.title}}</div>
<div class="table-cell green-text">{{advert.advert}}</div>
</div>
我已将我的分页逻辑放在一个单独的模块中并将其导入AppModule. 下面是我的分页模块和AppModule.
分页实用程序模块：
import { NgModule, ModuleWithProviders, Injector } from '@angular/core';
import { CommonModule } from '@angular/common';
import { OrderByPipe } from './order-by.pipe';
import { FilterPipe } from './filter.pipe';
import { SortByDirective } from './sort-by.directive';
import { PaginationComponent } from './pagination/pagination.component';
import { ServiceLocator } from './service-locator';
@NgModule({
imports: [
CommonModule
],
declarations: [
SortByDirective,
PaginationComponent
],
exports: [
SortByDirective,
PaginationComponent
]
})
export class PagingUtilitiesModule {
constructor(private injector: Injector) {
ServiceLocator.injector = this.injector;
}
static …我按照这个链接创建了我自己的时间前管道： Angular 2 "time ago" pipe
但是当我注入并使用它时，我看到了错误：
模板解析错误：找不到管道“timeAgo”
下面是我的代码，请帮我解决这个问题，非常感谢！！
timeAgo.pipe.ts
import { Pipe, ChangeDetectorRef } from '@angular/core';
import { AsyncPipe } from '@angular/common';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/startWith';
@Pipe({
name: 'timeAgo',
pure: false
})
export class TimeAgoPipe extends AsyncPipe {
value: Date;
timer: Observable<string>;
constructor(private ref: ChangeDetectorRef){
super(ref);
}
transform(obj: any, args?: any[]): any {
if(obj instanceof Date) {
this.value = obj;
if(!this.timer) {
this.timer = this.getObservable();
}
return this.timer;
}
return this.transform(obj, args);
} …货币管应该足够聪明来处理string,float,int,自动等.
如果传递值string与否int或者float,就应该什么都不做,因为它是显示传递的值.并且只显示格式化值,如果是int或float.
它发生在angularJs但没有发生角度(2)
如何告诉货币管道以防万一string,如果它是一个decimal值,则进行货币格式化.我期待下面的东西.
<div>Money:{{'xxx/vv/cc' | currency:'USD':true:'1.2-2'}}</div> 应该显示
xxx/vv/cc
<div>Money: {{''11.99'' | currency:'USD':true:'1.2-2'}}</div>
应显示$11.99- 包含$符号.
但它没有发生.我得到的错误是caused by: Invalid argument 'Included' for pipe 'CurrencyPipe'
我认为它默认发生在angularjs中,但在angular2中它不会发生defalut.
我有一个要显示为货币的输入。我只允许小数点后两位，并且只允许数字，并在必要时自动添加逗号。基本上，如果用户键入“ 12345”，我希望输入自动显示为“ 12,345.00”。“ 12,345”也是可以接受的，但是如果他们输入“ 12345.5”，则需要显示为“ 12,345.50”。我试图使用管道来完成此操作，并决定使用“数字”管道，因为我不想显示货币符号（输入之前我已经有一个美元符号作为标签）。
这是我的代码：
<input [ngModel]="Amount | number: '1.2-2'" (ngModelChange)="updateAmount($event)" class="form-control" id="Amount" name="Amount" tabindex="4" type="number" autocomplete="off">
我有一些问题。
管道'DecimalPipe'的无效参数'11 .00a'
发生此错误后，过滤器将完全停止工作。
如果将输入设置为，type="number"并输入1234，则值将为1,234，但是输入将消失，并且我将在控制台中收到以下消息：
指定的值“ 1,234”不是有效数字。该值必须与以下正则表达式匹配：-？（\ d + | \ d +。\ d + |。\ d +）（[eE] [-+]？\ d +）？
使用JQuery Inputmask在限制/显示输入方面给了我想要的结果，但是它破坏了ngModel并将值设置为空，因此这对我来说不是一个选择，除非有人知道解决方法。
我可以对管道进行一些更改以获得我想要的结果吗？我该如何工作？
以下绑定:
{{ -50.52338914680037 }}
{{ -50.52338914680037 | number }}
{{ -50.52338914680037 | percent }}
生产:
-50.52338914680037
-50.523
-5,052.339%
我期待百分比管道的输出
-50.523%
有什么我想念的吗？
我想将日期列格式化为 Angular 2 NGX 数据表中的短日期。
这是 HTML：
<ngx-datatable
[rows]="toDos"
[columns]="columns">
</ngx-datatable>
这是组件 TypeScript
import { Component, OnInit } from '@angular/core';
import { IToDo } from '../shared/todo';
import { ToDoService } from '../shared/todo.service';
@Component({
selector: 'app-todo-list',
templateUrl: './todo-list.component.html',
styleUrls: ['./todo-list.component.css']
})
export class TodoListComponent implements OnInit {
toDos: IToDo[];
columns = [
{ prop: 'toDoId' },
{ name: 'To Do', prop: 'name' },
{ prop: 'priority' },
{ prop: 'dueDate' },
{ prop: 'completed' }
];
constructor(private _toDoService: ToDoService) {
} …我想在 html 上以年为单位显示月数。我的过滤器将月数作为输入，它应该返回年数。
例如：如果以 12 作为输入，则应将转换后的值返回为 1 年。如果超过 1 年，则应返回“2 年”。
我的管道包含：
import { Pipe, PipeTransform} from '@angular/core';
@Pipe({name : 'displayMonthsInYears '})
export class DisplayMonthsInYears implements PipeTransform{
transform(noOfMonths : number) : any {
if(noOfMonths > 12){
return (noOfMonths / 12 + $translate.instace('YEARS'));
}
return (noOfMonths / 12 + $translate.instace('YEAR'));
}
}
和 html 是：
<div class="text-left">
{{ contractDuration | displayMonthsInYears }}
</div>
我不知道如何做到这一点。请帮忙。
在Angular 2中，我有一个带有模板的组件。
在组件TypeScript代码中，我创建了一个Reactive Extensions Observable（items$），并在ngFor带有异步管道的模板的-directive中使用它。
这样，我不必担心自己订阅和取消订阅。
<div *ngFor="let item of items$ | async"></div>
...
</div>
现在，从组件代码中，我想访问项目列表，但不订阅它。模板是否有办法退还或引用项目列表？