时间戳

首页 > 解决方案 > 如何使用 Angular 10 搜索按键？

arrays - 如何使用 Angular 10 搜索按键？

问题描述

我知道这是一个菜鸟问题，但我忘记了这种语法是如何工作的......我尝试了一些东西，但它并没有真正奏效......有人可以帮助我吗？

我有这个数组：

products = [
{name: banana},
{name: apple},
{name: orange}
]

我有这个搜索输入

<input (keydown)="filterProducts($event)" placeholder="Ex. Banana">

这是我的功能

  filterProducts({target: {value}}) {
    this.products.filter(filtered => {
       const filter = filtered.name.includes(value)
      console.log(filter)
    })
  }

我在控制台日志中得到的只是对或错，但我想获得一个新数组，其中仅包含其名称以搜索输入字母开头的项目...谢谢！

注意：不使用管道

标签： arraysangularsearchfilter

解决方案

filtered.name.includes(value)是一个布尔函数，所以它显示你的布尔值console.log

如果你这样做

 filterProducts({target: {value}}) {
    const filteredProducts = this.products.filter(filtered=>filtered.name.includes(value))
    console.log(filteredProducts) // this prints the array of filtered
  }

你会看到数组被过滤了

推荐阅读