我知道我可以調用一個管道是這樣的:如何用多個參數調用Angular 2管道?
{{ myData | date:'fullDate' }}
這裏的日期管只有一個參數。 從組件的模板HTML直接在代碼中調用具有更多參數的管道的語法是什麼?
我知道我可以調用一個管道是這樣的:如何用多個參數調用Angular 2管道?
{{ myData | date:'fullDate' }}
這裏的日期管只有一個參數。 從組件的模板HTML直接在代碼中調用具有更多參數的管道的語法是什麼?
在組件的模板,你可以通過用冒號分隔使用多個參數:
{{ myData | myPipe: 'arg1':'arg2':'arg3'... }}
從你的代碼會是這樣的:
new MyPipe().transform(myData, arg1, arg2, arg3)
而在你的管道內的變換函數你可以使用這樣的參數:
export class MyPipe implements PipeTransform {
transform(value:any, arg1:any, arg2:any, arg3:any):any {
}
測試版16和前(2016年4月26日)
管道獲取包含所有的參數,所以你需要給他們打電話像這樣的數組:
new MyPipe().transform(myData, [arg1, arg2, arg3...])
而且你的轉換函數看起來像這樣:
export class MyPipe implements PipeTransform {
transform(value:any, args:any[]):any {
var arg1 = args[0];
var arg2 = args[1];
...
}
您錯過了實際的管道。
{{ myData | date:'fullDate' }}
多個參數可以用冒號(:)分隔。
{{ myData | myPipe:'arg1':'arg2':'arg3' }}
而且可以鏈管道,像這樣:
{{ myData | date:'fullDate' | myPipe:'arg1':'arg2':'arg3' }}
由於beta.16參數沒有作爲陣列到transform()
方法不再而是通過作爲單獨的參數:
{{ myData | date:'fullDate':'arg1':'arg2' }}
export class DatePipe implements PipeTransform {
transform(value:any, arg1:any, arg2:any):any {
...
}
https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta16-2016-04-26
管道現在採用可變數量的參數,而不是包含所有參數的數組。
我使用Angular 2+中的管道來過濾對象的數組。以下采用多個過濾器參數,但如果符合您的需要,您可以發送一個參數。這是一個Plunker Example。它會找到您要過濾的鍵,然後按您提供的值進行過濾。這其實很簡單,如果聽起來很複雜,那麼請查看Plunker Example。
*請注意在上面的回答中,Gunter聲明數組不再用作過濾器接口,但我搜索了他提供的鏈接,但沒有發現任何與該聲明發言的內容。另外,我提供的Plunker示例顯示了此代碼在Angular 5.2中按照預期工作。它將在Angular 2+中工作。
這裏是被稱爲在* ngFor指令中管件,
<div *ngFor='let item of items | filtermulti: [{title:"mr"},{last:"jacobs"}]' >
Hello {{item.first}} !
</div>
這裏是管道,
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filtermulti'
})
export class FiltermultiPipe implements PipeTransform {
transform(myobjects: Array<object>, args?: Array<object>): any {
if (args && Array.isArray(myobjects)) {
// copy all objects of original array into new array of objects
var returnobjects = myobjects;
// args are the compare oprators provided in the *ngFor directive
args.forEach(function (filterobj) {
let filterkey = Object.keys(filterobj)[0];
let filtervalue = filterobj[filterkey];
myobjects.forEach(function (objectToFilter) {
if (objectToFilter[filterkey] != filtervalue && filtervalue != "") {
// object didn't match a filter value so remove it from array via filter
returnobjects = returnobjects.filter(obj => obj !== objectToFilter);
}
})
});
// return new array of objects to *ngFor directive
return returnobjects;
}
}
}
這裏是包含對象進行過濾組件,
import { Component } from '@angular/core';
import { FiltermultiPipe } from './pipes/filtermulti.pipe';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
items = [{ title: "mr", first: "john", last: "jones" }
,{ title: "mr", first: "adrian", last: "jacobs" }
,{ title: "mr", first: "lou", last: "jones" }
,{ title: "ms", first: "linda", last: "hamilton" }
];
}
GitHub Example: Fork a working copy of this example here
希望這有助於人。快樂編碼:-)
這種設計很愚蠢。每次遇到此問題時,我都需要檢查文檔 – tom10271