首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在angular2中实现数组搜索过滤?

在Angular 2中实现数组搜索过滤可以通过以下步骤完成:

  1. 首先,创建一个输入框,用于接收用户输入的搜索关键字。
代码语言:html
复制
<input type="text" [(ngModel)]="searchKeyword" placeholder="Search">
  1. 在组件类中定义一个数组用于存储要搜索的数据,并创建一个过滤后的结果数组。
代码语言:typescript
复制
export class MyComponent {
  searchKeyword: string;
  data: any[] = [
    { name: 'John', age: 25 },
    { name: 'Jane', age: 30 },
    { name: 'Bob', age: 35 }
  ];
  filteredData: any[];

  constructor() {
    this.filteredData = this.data;
  }
}
  1. 创建一个方法用于执行搜索过滤逻辑,并在输入框的值发生变化时调用该方法。
代码语言:typescript
复制
export class MyComponent {
  // ...

  filterData() {
    this.filteredData = this.data.filter(item =>
      item.name.toLowerCase().includes(this.searchKeyword.toLowerCase())
    );
  }
}
  1. 在模板中使用ngFor指令遍历过滤后的结果数组,并在每个项上显示相关信息。
代码语言:html
复制
<ul>
  <li *ngFor="let item of filteredData">
    {{ item.name }} - {{ item.age }}
  </li>
</ul>
  1. 最后,在输入框的值发生变化时调用filterData方法。
代码语言:html
复制
<input type="text" [(ngModel)]="searchKeyword" (input)="filterData()" placeholder="Search">

这样,当用户在输入框中输入关键字时,数组会根据关键字进行过滤,并在页面上显示过滤后的结果。

关于Angular 2的更多信息和相关产品,你可以参考腾讯云的官方文档和产品介绍页面:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券