Angular는 orderBy 필터를 기본 제공하지 않지만 필요하다고 결정하면 쉽게 만들 수 있습니다. 그러나 속도 및 축소와 관련하여 알아야 할 몇 가지주의 사항이 있습니다. 아래를 참조하십시오.
간단한 파이프는 다음과 같습니다.
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'sort'
})
export class SortPipe implements PipeTransform {
transform(ary: any, fn: Function = (a,b) => a > b ? 1 : -1): any {
return ary.sort(fn)
}
}
이 파이프는 정렬 함수 ( fn)를 받아들이고 기본 배열을 합리적인 방식으로 정렬하는 기본값을 제공합니다. 원하는 경우이 정렬 기능을 재정의 할 수 있습니다.
속성 이름은 축소 될 수 있으므로 속성 이름을 문자열로 허용하지 않습니다. 코드를 축소하면 변경되지만 축소자는 템플릿 문자열의 값도 축소 할만큼 똑똑하지 않습니다.
기본 요소 (숫자 및 문자열) 정렬
이를 사용하여 기본 비교기를 사용하여 숫자 또는 문자열 배열을 정렬 할 수 있습니다.
import { Component } from '@angular/core';
@Component({
selector: 'cat',
template: `
{{numbers | sort}}
{{strings | sort}}
`
})
export class CatComponent
numbers:Array<number> = [1,7,5,6]
stringsArray<string> = ['cats', 'hats', 'caveats']
}
개체 배열 정렬
객체 배열을 정렬하려면 비교 함수를 제공 할 수 있습니다.
import { Component } from '@angular/core';
@Component({
selector: 'cat',
template: `
{{cats | sort:byName}}
`
})
export class CatComponent
cats:Array<Cat> = [
{name: "Missy"},
{name: "Squoodles"},
{name: "Madame Pompadomme"}
]
byName(a,b) {
return a.name > b.name ? 1 : -1
}
}
주의 사항-순수 파이프와 불순 파이프
Angular 2는 순수하고 불순한 파이프의 개념을 가지고 있습니다.
순수 파이프는 객체 ID를 사용하여 변경 감지를 최적화합니다. 이는 입력 객체가 ID를 변경하는 경우 (예 : 배열에 새 항목을 추가하는 경우)에만 파이프가 실행됨을 의미합니다. 물체로 내려 가지 않습니다. 즉, 중첩 된 속성을 변경 this.cats[2].name = "Fluffy"하면 파이프가 다시 실행되지 않습니다. 이것은 Angular가 빠르도록 도와줍니다. 각도 파이프는 기본적으로 순수합니다.
반면에 불순한 파이프 는 객체 속성을 확인합니다. 이것은 잠재적으로 훨씬 느리게 만듭니다. 파이프 함수가 수행 할 작업을 보장 할 수 없기 때문에 (예를 들어 시간에 따라 다르게 정렬 될 수 있음) 비동기 이벤트가 발생할 때마다 불순한 파이프가 실행됩니다. 배열이 큰 경우 앱 속도가 상당히 느려집니다.
위의 파이프는 순수합니다. 즉, 배열의 개체가 변경 불가능할 때만 실행됩니다. 고양이를 변경하는 경우 전체 고양이 개체를 새 개체로 바꿔야합니다.
this.cats[2] = {name:"Tomy"}
pure 속성을 설정하여 위를 불순한 파이프로 변경할 수 있습니다.
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'sort',
pure: false
})
export class SortPipe implements PipeTransform {
transform(ary: any, fn: Function = (a,b) => a > b ? 1 : -1): any {
return ary.sort(fn)
}
}
이 파이프는 물체로 내려가지만 속도가 느려집니다. 주의해서 사용하십시오.