在 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() 方法建立一個新的 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() 訊號。
我們必須從 @angular/core 匯入 OnInit 才能使用 ngOnInit()（實際上，這不是必需的，但作為一種好的做法，匯入 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