在 Angular 中過濾陣列

Muhammad Adil 2023年1月30日 2022年4月20日
  1. Angular 2 過濾陣列與 Angular 1 過濾陣列
  2. 使用 ngOnInit() 在 Angular 2 中過濾陣列
在 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-Forng-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 avatar Muhammad Adil avatar

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

相關文章 - Angular Array