Angular의 필터 배열
filter() 메서드를 사용하면 배열의 각 요소에 함수를 적용한 다음 함수가 true를 반환한 요소만 포함하는 새 배열을 반환할 수 있습니다.
filter() 메서드를 사용하여 속성 값으로 배열의 요소를 필터링할 수 있습니다. 이 기사에서는 Angular 2의 필터링에 대한 전체 세부 정보에 대해 설명합니다.
Angular 2는 TypeScript를 기반으로 구축된 MVW 프레임워크이며 모델 보기 아키텍처가 무엇이든 상관없습니다. Angular 1을 완전히 재작성했으며 최신 웹 기술을 활용합니다.
Angular 2에서 배열은 Array 유형으로 표시됩니다. 예를 들어, 문자열 배열은 다음과 같이 선언할 수 있습니다.
var myArray = new Array();
myArray.push("John");
myArray.push("Mary");
myArray.push("Anna");
// myArray contains "John", "Mary" and "Anna"
Angular 2 필터 어레이 대 Angular 1 필터 어레이
Angular 2 필터는 입력을 받아 변환된 입력을 반환하는 템플릿 필터입니다. Angular 2는 데이터를 변경하는 방법을 제공하는 파이프 개념을 도입했습니다.
파이프는 파이프를 사용하여 생성됩니다. pipe() 메서드는 새 pipe를 만들고 이름 아래 현재 scope에 등록합니다.
Angular 1에는 필터가 내장되어 있습니다. 이러한 필터를 표현식에 적용하여 표현식 결과에 대한 특정 작업을 수행할 수 있습니다.
filter() 메소드는 필터를 생성하는 데 사용되며 apply() 메소드는 필터를 표현식에 적용하는 데 사용됩니다.
Angular 2 필터와 Angular 1 필터의 차이점은 파이프를 사용하여 Angular 2에서 여러 필터를 함께 연결할 수 있다는 것입니다. 대조적으로 Angular 1에서는 여러 필터를 연결하려면 괄호를 사용해야 합니다.
Angular 필터 배열에 대해 자세히 알아보려면 여기를 클릭하십시오.
이제 Angular 2에서 필터를 단계별로 만들어 보겠습니다. Angular 2에서 가장 먼저 하는 일은 새로운 Pipe를 구성하는 것입니다. 아래는 어떻게 보일지입니다.
import { Pipe } from '@angular/core';
@Pipe({
name: 'AgePipe'
})
export class AgePipe {}
ngOnInit()를 사용하여 Angular 2에서 배열 필터링
Angular 필터에서 주로 사용되는 것은 ngOnInit()입니다. Angular 2에는 데이터 바인딩이 업데이트되는 방법과 시기를 제어하는 데 사용할 수 있는 수명 주기 후크가 있습니다.
ngOnInit()은 첫 번째 ngOnChanges() 직후와 ngDoCheck() 전에 호출됩니다.
ngOnInit은 수명 주기 후크 중 하나입니다. Angular는 구성 요소가 완전히 초기화되면 ngOnInit() 신호를 호출합니다.
ngOnInit()를 사용하려면 @angular/core에서 OnInit를 가져와야 합니다(실제로 필수 사항은 아니지만 모범 사례로 OnInit 가져오기). ngOnInit에 대해 자세히 알아보려면 여기를 클릭하십시오.
angular-CLI를 사용하여 새 구성요소를 생성하면 ngOnInit가 자동으로 삽입됩니다. 이 예에서 ngOnInt()를 구현합니다.
ngOnInit() {
this.setData();
}
setData() {
this.dataObject = HelloData;
}
전체 Typescript 코드는 아래에 나와 있습니다.
import { Component, OnInit } from '@angular/core';
import { Pipe } from '@angular/core';
@Pipe({
name: 'AgePipe'
})
export class AgePipe { }
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
dataObject = [];
filter = { RegCategoryName: '' }
constructor() { }
ngOnInit() {
this.setData();
}
setData() {
this.dataObject = HelloData;
}
filterIt($event) {
this.filter.RegCategoryName = $event.target.value;
this.dataObject = HelloData.filter(value => {
const data = { ...value };
data.List = data.List.map(ch => {
const list = { ...ch };
list.RegistrationCategory = list.RegistrationCategory.filter(gChild => {
return gChild.RegCategoryName.toLowerCase().indexOf(this.filter.RegCategoryName.toLowerCase()) !== -1
});
return list;
});
return data.List.some(list => !!list.RegistrationCategory.length);
});
}
}
const HelloData = [
{
"BookId": 1,
"Book": {
"BookId": 1,
"BookName": "When Life Begins",
},
"List": [
{
"RegistrationCategory": [
{
"RegistrationCategoryId": 203,
"RegCategoryName": "Abu Yahya"
}
],
"viewMore": false
}
]
},
{
"BookId": 2,
"Book": {
"BookId": 2,
"BookName": "British History",
},
"List": [
{
"RegistrationCategory": [
{
"RegistrationCategoryId": 204,
"RegCategoryName": "Usman"
}
],
"viewMore": false
}
]
},
{
"BookId": 3,
"Book": {
"BookId": 3,
"BookName": "Holidays",
},
"List": [
{
"BookId": 3,
"RegistrationCategory": [
{
"RegistrationCategoryId": 205,
"RegCategoryName": "Egon Homtic"
}
],
"viewMore": false
}
]
},
{
"BookId": 4,
"Book": {
"BookId": 4,
"BookName": "Destination",
"ShortCode": "ABC04",
},
"List": [
{
"RegistrationCategory": [
{
"RegistrationCategoryId": 205,
"RegCategoryName": "Steve Jobs"
}
],
"viewMore": false
},
]
}
]
그런 다음 HTML 코드 작업을 시작하고 주요 관심사는 ng-For를 올바르게 작업하는 것입니다.
ng-For 지시문은 값 목록을 반복하고 목록의 각 항목을 표시하는 데 사용됩니다. ng-repeat의 대안으로 사용할 수 있습니다.
ng-repeat 지시문은 데이터 세트에 많은 항목이 포함되어 있고 모든 항목을 페이지에 표시하려는 경우에 더 적합합니다. 그러나 여기에서는 검색 필터를 사용하여 검색 명령에 따라 결과를 표시합니다. 그래서 ng-For가 ng-repeat보다 더 유용할 것입니다.
<tr *ngFor="let data of dataObject">
<td>{{data.Book.BookName}}</td>
<td>
<div *ngFor="let cat of data.List">
<div *ngFor="let child of cat.RegistrationCategory">
전체 HTML 코드는 아래에 나와 있습니다.
Search by Id : <input type="text" (keyup)="filterIt($event)">
<table>
<tr>
<th>Books</th>
<th>Book Author (ID) Write Author name in the above search bar and see the magic of Angular 2 Filter</th>
</tr>
<tr *ngFor="let data of dataObject">
<td>{{data.Book.BookName}}</td>
<td>
<div *ngFor="let cat of data.List">
<div *ngFor="let child of cat.RegistrationCategory">
{{child.RegCategoryName}}
</div>
</div>
</td>
</tr>
</table>
여기를 클릭 위 코드의 라이브 데모를 확인하십시오.
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook