Angular 2パイプを複数の引数で呼び出すにはどうすればよいですか?


204

私はこのようにパイプを呼び出すことができることを知っています:

{{ myData | date:'fullDate' }}

ここでは、日付パイプは引数を1つだけ取ります。コンポーネントのテンプレートHTMLからコード内で直接、より多くのパラメーターを使用してパイプを呼び出す構文は何ですか?

回答:


404

コンポーネントのテンプレートでは、複数の引数をコロンで区切って使用できます。

{{ 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];
        ...
    }
}

8
このデザインはばかげています。この問題に遭遇するたびにドキュメントをチェックする必要があります
tom10271

何だろうのようなテンプレートビット見ればarg1arg2場所の両方のオプションで、あなただけで渡したいですかarg2
freethebees

undefined最初の引数として渡すと、デフォルト値が取得されます。
エランシャビ2018年

3
今どきの代わりにtransform(value:any, arg1:any, arg2:any, arg3:any)、残りの演算子を使用して、より良い感じ、私は思う:transform(value:any, ...args:any[])
MKB

なぜtransform(... args)はエラーを引き起こしますがtransform(value、... args)はエラーを引き起こしませんか?
Sh eldeeb

45

実際のパイプがありません。

{{ myData | date:'fullDate' }}

複数のパラメーターは、コロン(:)で区切ることができます。

{{ myData | myPipe:'arg1':'arg2':'arg3' }}

また、次のようにパイプをチェーンすることもできます。

{{ myData | date:'fullDate' | myPipe:'arg1':'arg2':'arg3' }}

25

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

パイプは可変数の引数を取り、すべての引数を含む配列は取りません。


何だろうのようなテンプレートビット見ればarg1arg2場所の両方のオプションで、あなただけで渡したいですかarg2
freethebees

以外の変数名を使用できますarg1か?のようにisFullDate。すべての例がこれを使用しているので、私はただ尋ねています。
sabithpocker

'arg1'そして、'arg2'単なる文字列リテラルは、パイプへの追加パラメータとして渡されます。あなたはそのスコープで利用可能な任意の値または基準(現在のコンポーネントのインスタンス)を使用することができ
ギュンターZöchbauer

1
nullを渡さなければならない@freethebees
karoluS

変換メソッドは配列引数の良い点@Gunterをサポートしていません
BALS

5

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" }
  ];
}

StackBlitzの例

GitHubの例:この例の作業用コピーをここにフォークします

* Gunterによる回答で、Gunterは配列がフィルターインターフェイスとして使用されなくなったと述べていますが、私は彼が提供するリンクを検索しましたが、その主張については何も見つかりませんでした。また、提供されているStackBlitzの例は、Angular 6.1.9で意図したとおりに機能するこのコードを示しています。Angular 2+で動作します。

ハッピーコーディング:-)


複数のパラメータをパイプに直接渡す代わりに、複数のエントリを持つ単一の配列を渡す意味はありません。
BrunoJCM

配列にはオブジェクトが含まれています。オブジェクトには、動的クエリを作成するために使用される複数のキーと値のペアを含めることができ、列の行の値と比較して列名を使用して一致するレコードを検索できます。CSVパラメーターを渡すこのレベルの動的クエリを取得することはできません。
user3777549

-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);
      }
    })
  });
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.