복수의 인수가 있는 Angular 2 파이프를 호출하려면 어떻게 해야 합니까?

복수의 인수가 있는 Angular 2 파이프를 호출하려면 어떻게 해야 합니까?

파이프는 이렇게 부를 수 있어요

{{ myData | date:'fullDate' }}

여기서 날짜 파이프는 인수를 하나만 받습니다.컴포넌트의 템플릿 HTML에서 직접 코드를 사용하여 더 많은 파라미터를 가진 파이프를 호출하는 구문은 무엇입니까?

컴포넌트 템플릿에서는 여러 인수를 콜론으로 구분하여 사용할 수 있습니다.

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

진짜 파이프가 없어

{{ myData | date:'fullDate' }}

여러 파라미터는 콜론(:)으로 구분할 수 있습니다.

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

또한 다음과 같이 파이프를 체인할 수 있습니다.

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

베타판부터.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+의 파이프를 사용하여 객체의 배열을 필터링합니다.다음은 여러 필터 인수를 사용하지만 필요에 따라 하나만 보낼 수 있습니다.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+로 동작합니다.

해피 코딩 :-)

그리고 여러분, 저처럼 파서 오류가 발생하면 파이프 이름에 대시가 포함되어서는 안 됩니다.

@Pipe({ name: 'arrayFilter' }) // I had 'array-filter'
export class ArrayFilterPipe implements PipeTransform {
    public transform(items: any[], value: string, props: string[]) { ... }
}

구문 분석 안 함: *ngFor="let workflow of workflows | ***array-filter***: workflowFilter:['Name']; trackBy: trackWorkflow"

해석: *ngFor="let workflow of workflows | ***arrayFilter***: workflowFilter:['Name']; trackBy: trackWorkflow"

내선번호 : user3777549

하나의 데이터 세트에 대한 다중 값 필터(제목 키에 대한 참조만)

HTML

<div *ngFor='let item of items | filtermulti: [{title:["mr","ms"]},{first:["john"]}]' >
 Hello {{item.first}} !
</div>

필터 복수

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

언급URL : https://stackoverflow.com/questions/36816788/how-do-i-call-an-angular-2-pipe-with-multiple-arguments