web-dev-qa-db-ja.com

どうやって呼び出すのですか Angular 複数の引数を持つ2パイプ？

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

{{ myData | date:'fullDate' }}

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

javascriptangularangular2-pipe
132
Eran Shabi

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

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

あなたは実際のパイプを見逃しています。

{{ myData | date:'fullDate' }}

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

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

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

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

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

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

20
Günter Zöchbauer

オブジェクトの配列をフィルタ処理するためにAngular 2+でPipesを使用します。以下は複数のフィルタ引数を取りますが、それがあなたのニーズに合っていればあなたはただ一つを送ることができます。これが StackBlitzの例 です。それはあなたがフィルタリングしたいキーを見つけ、あなたが与えた値でフィルタリングします。それは実際には非常に単純です、それが複雑に思えばそれはそうではありません、 StackBlitzの例 をチェックしてください。

これは* ngForディレクティブで呼び出されるPipeです、

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

これは、フィルタリングするオブジェクトを含むComponentです。

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は配列はもはやフィルタインターフェースとして使われていないと述べていますが、彼が提供するリンクを検索しましたAngular 6.1.9で意図したとおりに動作することはAngular 2+で動作することになります。

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

5
user3777549

から拡張： 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);
      }
    })
  });
0
Sharan