在 Angular 9 中按键过滤 json 数组 - Javascript (1)

📌 相关文章

📜 在 Angular 9 中按键过滤 json 数组 - Javascript (1)

📅 最后修改于: 2023-12-03 15:23:06.575000 🧑 作者: Mango

在 Angular 9 中按键过滤 JSON 数组 - JavaScript

在 Angular 9 中，我们可以使用键盘事件来过滤 JSON 数组。这个过滤器可以根据用户输入来过滤包含特定关键字的 JSON 数组元素。在这个教程里，我们将介绍如何使用 Angular 9 和 JavaScript 来实现这个过滤器。

HTML 模板

首先，我们需要在 HTML 模板中添加一个搜索框和一个显示 JSON 数组元素的列表。

<input type="text" (keyup)="onFilter($event.target.value)" placeholder="Type to filter">
<ul>
  <li *ngFor="let item of filteredItems">{{ item.name }}</li>
</ul>

我们可以看到，在搜索输入框中添加了一个键盘事件 (keyup) 来触发 onFilter() 函数。该函数将搜索关键字发送给后台并使用 Angular 9 中的 ngFor 指令来显示返回的过滤器结果。

在组件中添加实现

接下来，我们需要在组件中实现 onFilter() 函数。该函数应该从后端或本地存储获取 JSON 数据，并将过滤器应用于该数据。

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  items: any[] = [];
  filteredItems: any[] = [];

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.http.get<any[]>('api/data').subscribe(data => {
      this.items = data;
      this.filteredItems = data;
    });
  }

  onFilter(keyword: string): void {
    this.filteredItems = this.items.filter(item => item.name.includes(keyword));
  }
}

在这个组件中，我们首先定义一个空数组 items 来存储 JSON 数据。在 OnInit() 生命周期钩子中，我们使用 HttpClient 来从后端服务器获取 JSON 数据。在组件加载后返回数据，我们将数据存储在 items 和 filteredItems 数组中，以便我们可以轻松地在模板中访问它们。

接下来，我们实现 onFilter() 函数。该函数将接收到的搜索关键字应用于 items 数组，并将结果存储在 filteredItems 数组中。此时，我们仅需要使用 filter() 方法来过滤 JSON 数组。该方法将使用 includes() 方法根据关键字筛选出符合条件的元素。

Markdown 代码

# 在 Angular 9 中按键过滤 JSON 数组 - JavaScript

在 Angular 9 中，我们可以使用键盘事件来过滤 JSON 数组。这个过滤器可以根据用户输入来过滤包含特定关键字的 JSON 数组元素。在这个教程里，我们将介绍如何使用 Angular 9 和 JavaScript 来实现这个过滤器。

## HTML 模板

首先，我们需要在 HTML 模板中添加一个搜索框和一个显示 JSON 数组元素的列表。

```html
<input type="text" (keyup)="onFilter($event.target.value)" placeholder="Type to filter">
<ul>
  <li *ngFor="let item of filteredItems">{{ item.name }}</li>
</ul>

在组件中添加实现

接下来，我们需要在组件中实现 onFilter() 函数。该函数应该从后端或本地存储获取 JSON 数据，并将过滤器应用于该数据。

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  items: any[] = [];
  filteredItems: any[] = [];

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.http.get<any[]>('api/data').subscribe(data => {
      this.items = data;
      this.filteredItems = data;
    });
  }

  onFilter(keyword: string): void {
    this.filteredItems = this.items.filter(item => item.name.includes(keyword));
  }
}