在 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