在 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