다음과 같이 파이프를 호출 할 수 있다는 것을 알고 있습니다.
{{ 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' }}답변
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+의 파이프를 사용하여 객체 배열을 필터링합니다. 다음은 여러 개의 필터 인수를 취하지 만 필요에 따라 하나만 보낼 수 있습니다. 다음은 StackBlitz 예제 입니다. 필터링하려는 키를 찾은 다음 제공 한 값으로 필터링합니다. 실제로 매우 간단합니다. 복잡하지 않다면 StackBlitz Example을 확인하십시오 .
* 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;
}
}
}필터링 할 객체가 포함 된 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" }
];
}GitHub 예제 :이 예제의 작업 사본을 포크하십시오.
* Gunter가 제공 한 답변에서 Gunter는 어레이가 더 이상 필터 인터페이스로 사용되지 않지만 제공하는 링크를 검색하여 해당 주장에 대해 말하는 것을 발견하지 못했습니다. 또한 제공된 StackBlitz 예제는 Angular 6.1.9에서 의도 한대로 작동하는이 코드를 보여줍니다. Angular 2 이상에서 작동합니다.
행복한 코딩 🙂
답변
확장 : 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);
}
})
});