Angular のフィルター配列
filter() メソッドを使用すると、配列の各要素に関数を適用してから、関数が true を返した要素のみを含む新しい配列を返すことができます。
filter() メソッドを使用して、配列内の要素をプロパティ値でフィルターで除外できます。この記事では、Angular 2 でのフィルタリングの詳細について説明します。
Angular 2 は、TypeScript 上に構築された MVW フレームワークであり、モデルビューに関係なくアーキテクチャを備えています。これは Angular 1 を完全に書き直したものであり、最新の Web テクノロジーを利用しています。
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 では、最初に新しいパイプを作成します。以下はそれがどのように見えるかです。
import { Pipe } from '@angular/core';
@Pipe({
name: 'AgePipe'
})
export class AgePipe {}
ngOnInit() を使用して、Angular 2 の配列をフィルタリングする
Angular フィルターで使用される主なものは ngOnInit() です。Angular 2 には、データバインディングを更新する方法とタイミングを制御するために使用できるライフサイクルフックがあります。
ngOnInit() は、最初の ngOnChanges() の直後、および ngDoCheck() の前に呼び出されます。
ngOnInit はライフサイクルフックの 1つです。コンポーネントが完全に初期化されると、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