回答:
コンポーネントのテンプレートでは、複数の引数をコロンで区切って使用できます。
{{ myData | myPipe: 'arg1':'arg2':'arg3'... }}
あなたのコードからそれは次のようになります:
new MyPipe().transform(myData, arg1, arg2, arg3)
パイプ内の変換関数では、次のような引数を使用できます。
export class MyPipe implements PipeTransform {
// specify every argument individually
transform(value: any, arg1: any, arg2: any, arg3: any): any { }
// or use a rest parameter
transform(value: any, ...args: any[]): any { }
}
ベータ16以前(2016-04-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];
...
}
}
arg1
とarg2
場所の両方のオプションで、あなただけで渡したいですかarg2
?
undefined
最初の引数として渡すと、デフォルト値が取得されます。
transform(value:any, arg1:any, arg2:any, arg3:any)
、残りの演算子を使用して、より良い感じ、私は思う:transform(value:any, ...args:any[])
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
パイプは可変数の引数を取り、すべての引数を含む配列は取りません。
arg1
とarg2
場所の両方のオプションで、あなただけで渡したいですかarg2
?
arg1
か?のようにisFullDate
。すべての例がこれを使用しているので、私はただ尋ねています。
'arg1'
そして、'arg2'
単なる文字列リテラルは、パイプへの追加パラメータとして渡されます。あなたはそのスコープで利用可能な任意の値または基準(現在のコンポーネントのインスタンス)を使用することができ
Angular 2+でパイプを使用して、オブジェクトの配列をフィルタリングします。以下は複数のフィルター引数を取りますが、必要に応じて1つだけ送信できます。ここでStackBlitz例。それはあなたがフィルターしたいキーを見つけ、次にあなたが提供する値でフィルターします。実際には非常にシンプルです。複雑に聞こえない場合は、StackBlitzの例を確認してください。
* 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の例:この例の作業用コピーをここにフォークします
* Gunterによる回答で、Gunterは配列がフィルターインターフェイスとして使用されなくなったと述べていますが、私は彼が提供するリンクを検索しましたが、その主張については何も見つかりませんでした。また、提供されているStackBlitzの例は、Angular 6.1.9で意図したとおりに機能するこのコードを示しています。Angular 2+で動作します。
ハッピーコーディング:-)
拡張元:user3777549
1セットのデータに対する複数値フィルター(タイトルキーのみへの参照)
HTML
<div *ngFor='let item of items | filtermulti: [{title:["mr","ms"]},{first:["john"]}]' >
Hello {{item.first}} !
</div>
filterMultiple
args.forEach(function (filterobj) {
console.log(filterobj)
let filterkey = Object.keys(filterobj)[0];
let filtervalue = filterobj[filterkey];
myobjects.forEach(function (objectToFilter) {
if (!filtervalue.some(x=>x==objectToFilter[filterkey]) && filtervalue != "") {
// object didn't match a filter value so remove it from array via filter
returnobjects = returnobjects.filter(obj => obj !== objectToFilter);
}
})
});