我正在使用date管道格式化我的日期,但我无法获得我想要的确切格式而无需解决方法.我是错误地理解管道还是不可能？
//our root app component
import {Component} from 'angular2/core'
@Component({
selector: 'my-app',
providers: [],
template: `
<div>
<h2>Hello {{name}}</h2>
<h3>{{date | date: 'ddMMyyyy'}}, should be
{{date | date: 'dd'}}/{{date | date:'MM'}}/{{date | date: 'yyyy'}}</h3>
</div>
`,
directives: []
})
export class App {
constructor() {
this.name = 'Angular2'
this.date = new Date();
}
}
在这种情况下,我正在向视图中显示学生列表(数组)ngFor:
<li *ngFor="#student of students">{{student.name}}</li>
每当我将其他学生添加到列表中时,它都会更新.
然而,当我给它一个pipe到filter由学生的名字,
<li *ngFor="#student of students | sortByName:queryElem.value ">{{student.name}}</li>
在我在过滤学生姓名字段中输入内容之前,它不会更新列表.
这是plnkr的链接.
Hello_world.html
<h1>Students:</h1>
<label for="newStudentName"></label>
<input type="text" name="newStudentName" placeholder="newStudentName" #newStudentElem>
<button (click)="addNewStudent(newStudentElem.value)">Add New Student</button>
<br>
<input type="text" placeholder="Search" #queryElem (keyup)="0">
<ul>
<li *ngFor="#student of students | sortByName:queryElem.value ">{{student.name}}</li>
</ul>
sort_by_name_pipe.ts
import {Pipe} from 'angular2/core';
@Pipe({
name: 'sortByName'
})
export class SortByNamePipe {
transform(value, [queryString]) {
// console.log(value, queryString);
return value.filter((student) => new RegExp(queryString).test(student.name))
// return value;
} …我无法将此代码从angualr1转换为angular2,任何帮助？
ng-repeat="todo in todos | orderBy: 'completed'"
这就是我按照Thierry Templier的回答所做的事情:
html模板:
*ngFor="#todo of todos | sort"
组件文件:
@Component({
selector: 'my-app',
templateUrl: "./app/todo-list.component.html",
providers: [TodoService],
pipes: [ TodosSortPipe ]
})
管道文件:
import { Pipe } from "angular2/core";
import {Todo} from './todo';
@Pipe({
name: "sort"
})
export class TodosSortPipe {
transform(array: Array<Todo>, args: string): Array<Todo> {
array.sort((a: any, b: any) => {
if (a < b) {
return -1;
} else if (a > b) {
return 1;
} else {
return 0; …当我在模板中使用自定义管道时,就像这样.它运作良好.
{{user|userName}}
是否可以在代码中使用管道？我试着这样用,
let name = `${user|userName}`;
但它表明
userName未定义
我的替代方法是在代码中手动使用db.collection.findOne().但有什么聪明的方法吗？
在Angular 2中是否可以在条件下应用管道？我想做的事情如下:
{{ variable.text | (variable.value ? SomePipe : OtherPipe) }}
如果没有,实现这种效果的首选方法是什么？
@Pipe({name:'myPipe', pure: false})
我无法理解不纯净的管道,有些用纯管道更好.
请用一个简单而基本的例子来解释我？
我正在尝试使用Angular 2管道将时间戳转换为日期格式,所以基本上代码如下:
{{myTimestamp | date}}
其中loadDate是Load类的属性,类型为number.
我得到了奇怪的结果,例如时间戳myTimestamp(与2016年11月11日相匹配)显示为1468251287.
我想知道如何解决这个问题.
我试图弄清楚如何在反应形式中使用管道,以便输入被强制为货币格式.我已经为此创建了自己的管道,我已经在代码的其他区域进行了测试,所以我知道它可以作为一个简单的管道工作.我的管道名称是'udpCurrency'
我在堆栈溢出上找到的最接近的答案就是这个:在Angular2-View中的INPUT元素中使用ngModel中的管道然而这在我的情况下不起作用,我怀疑它与我的表单是被动的事实有关
以下是所有相关代码:
模板
<form [formGroup]="myForm" #f="ngForm">
<input class="form-control col-md-6"
formControlName="amount"
[ngModel]="f.value.amount | udpCurrency"
(ngModelChange)="f.value.amount=$event"
placeholder="Amount">
</form>
组件
import { Component, OnInit, HostListener } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
export class MyComponent implements OnInit {
myForm: FormGroup;
constructor(
private builder: FormBuilder
) {
this.myForm = builder.group({
amount: ['', Validators.required]
});
}
}
错误:
ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined: '. Current value: 'undefined: undefined'
我有一个使用角度十进制管道的自定义十进制格式管道.此管道是共享模块的一部分.我在功能模块中使用它,并在运行应用程序时没有提供程序错误.
如果有任何拼写错误,请忽略.
./src/pipes/custom.pipe.ts
import { DecimalPipe } from '@angular/common';
..
@Pipe({
name: 'customDecimalPipe'
})
...
export class CustomPipe {
constructor(public decimalPipe: DecimalPipe) {}
transform(value: any, format: any) {
...
}
./modules/shared.module.ts
import { CustomPipe } from '../pipes/custom.pipe';
...
@NgModule({
imports: [ .. ],
declarations: [ CustomPipe ],
exports: [ CustomPipe ]
})
export class SharedModule { }
我在其中一个组件中注入自定义管道并调用transform方法来获取转换后的值.共享模块导入到功能模块中.
我正在尝试使用自定义管道*ngFor使用带有ngModel的输入字段来过滤我的循环.使用我的其他自定义管道(sortBy),它工作得很好.但是,过滤管似乎使得没有数据出现.我还在学习这个,我尝试了一些变化无济于事:
-filter: term
-filter: {{term}}
-filter: 'term'
-filter" {{'term'}}
所以我认为问题可能在于代码中的其他地方.如果有人可以提供帮助,我会非常感激.
这是我的代码:
HTML组件
<div style="text-align:center">
<h1>
Welcome to {{title}}!!
</h1>
</div>
<h2>Please choose your favorite song: </h2>
<form id="filter">
<label>Filter people by name:</label>
<input type="text" name="term" [(ngModel)]="term" />
</form>
<table class="table">
<thead>
<tr>
<th>Title</th>
<th>Artist</th>
<th>Likes</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let song of songs | filter:term| sortBy: 'likes'; let i = index">
<td>{{song.title}}</td>
<td>{{song.artist}}</td>
<td>{{song.likes}}
<i class="fa fa-heart-o" aria-hidden="true" *ngIf="song.likes < 1"></i>
<i class="fa fa-heart" aria-hidden="true" *ngIf="song.likes >= 1"></i> …