Angular 2 过滤器/搜索列表

2024-03-08

我正在寻找 Angular 2 的方法this http://www.w3schools.com/howto/howto_js_filter_lists.asp.

我只有一个项目列表,我想进行一个输入,其工作是过滤该列表。

<md-input placeholder="Item name..." [(ngModel)]="name"></md-input>

<div *ngFor="let item of items">
{{item.name}}
</div>

在 Angular 2 中执行此操作的实际方法是什么?这个需要管子吗?


按多个字段搜索

假设数据:

items = [
  {
    id: 1,
    text: 'First item'
  },
  {
    id: 2,
    text: 'Second item'
  },
  {
    id: 3,
    text: 'Third item'
  }
];

Markup:

<input [(ngModel)]="query">
<div *ngFor="let item of items | search:'id,text':query">{{item.text}}</div>

Pipe:

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({
  name: 'search'
})
export class SearchPipe implements PipeTransform {
  public transform(value, keys: string, term: string) {

    if (!term) return value;
    return (value || []).filter(item => keys.split(',').some(key => item.hasOwnProperty(key) && new RegExp(term, 'gi').test(item[key])));

  }
}

一条线搞定一切!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular 2 过滤器/搜索列表 的相关文章

随机推荐

  • EJB、hibernate、spring 和 JSF 有什么区别? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我对不同的java框架感到非常困惑 我想创建一个 java 服务器项目来提供一些 Restful Web 服务 但我真的不知道应该选择
  • 无法获取价值,因为它已被优化掉

    我在调试时遇到问题 突然间 我在调试时看不到大多数变量的值 我设法在立即窗口中收到两条不同的消息 无法获取本地或参数 参数 的值 因为它在此指令指针处不可用 可能是因为它已被优化掉 and 表达式求值器中出现内部错误 我已经尝试并检查了以下
  • 在 swift 中发布 json 请求

    我知道如何发布简单的 json Compose a query string let postString firstName James lastName Bond request HTTPBody postString dataUsin
  • Java上将数据库中的数据以表单的形式输出给用户

    我最近开始学习Java 我需要用 Java 编写一个 Web 应用程序 用户可以从下拉列表中的主页 html 页面上的表单中选择他所需的产品 产品列表存储在数据库的表中 使用 MySQL 然后将所选产品写入 订单历史记录 表中 如何将数据库
  • 如何修复谷歌播放服务错误

    今天更新根文件夹中的播放服务后 我面临以下问题 我很困惑如何解决这个问题 谁能帮我解决这个问题吗 这个错误非常令人恼火 我不知道冲突在哪里 顺便说一句 为什么它显示冲突 而没有版本相互关联 Error 库 com google androi
  • PHP:如何获取过去特定日期的上周日?

    我正在从数据库中检索一个条目及其关联的日期 我希望能够获取相对于该特定日期的上周日和下周六来填充 jQuery 日期选择器 我知道如何使用实际时间 日期来做到这一点 strtotime last Sunday 但我不知道除了现在以外的约会该
  • SQL Server 中的 INNER JOIN 与 LEFT JOIN 性能

    我创建了在 9 个表上使用 INNER JOIN 的 SQL 命令 无论如何这个命令需要很长时间 超过五分钟 因此 我的家人建议我将 INNER JOIN 更改为 LEFT JOIN 因为 LEFT JOIN 的性能更好 尽管我知道 改了之
  • PHP fopen 会遵循 301 重定向吗?

    我们有一段遗留代码 ab 使用fopen 通过 HTTP 调用资源 fopen http example com 我们想要将 example com 移动到另一个主机 然后发送 301 Permanently Moved 但是 我们不完全确
  • 获取 SQL 表列的总和,直到总和达到 5000

    我正在对一个包含两列的表进行 sql 查询Amount and Date应该返回总和Amount列值直到达到5000它也应该返回值Date列在Sum Amount 达到5000排序Date 例如我的数据中有以下数据SQL TABLE ID
  • 使用带有标记的谷歌街景视图,如何将 POV 指向标记?

    我有一个简单的街景视图 可以向我显示给定地址的街景视图 var geocoder new google maps Geocoder var address 344 Laguna Dr Milpitas CA 95035 geocoder g
  • 由于未安装 EntityFrameworkCore.Tools,添加迁移失败

    我想按照本教程使用 EF Core 创建一个控制台应用程序 http ef readthedocs io en latest platforms full dotnet new db html http ef readthedocs io
  • Golang并发访问固定大小的map/array

    我正在探索使用固定键并发访问地图而无需锁定的可能性 以提高性能 我之前已经探索过与 slice 类似的功能 并且似乎它有效 func TestConcurrentSlice t testing T fixed int 1 2 3 wg sy
  • Unity:从设备摄像头录制视频

    我想要一个插件或一个库或一种从设备摄像头统一 Windows 独立 录制视频 当然有声音 的方法 目前 我可以使用该相机进行屏幕截图 有人说我可以截取很多张屏幕截图并将其转换为一个视频文件 我在资源商店找到了一个名为相机拍摄 https a
  • 继承的构造函数,在 clang++3.9 中编译,在 g++ 7 中失败

    这段代码片段 struct Base struct Derived Base using Base Base int main Base b Derived d b 在 clang 3 9 上编译良好 https godbolt org g
  • 是否可以在 Python 中生成正确的 PKCS12 (.pfx) 文件?

    我需要在 python 中生成一个 PKCS12 文件 其中包含自签名证书和私钥 我为此任务组装了以下 python 代码 import OpenSSL key OpenSSL crypto PKey key generate key Op
  • 如何存储我正在开发的 Alexa 技能的数据?

    我目前正在开发一项基于医疗保健的 Alexa 技能 所以我需要存储有关疾病 诊断和症状的信息 我已经掌握了一项基本技能 包括在一个文件中包含有关一种疾病的信息 制作了一个 zip 文件 将其上传到 AWS Lambda 并获得了 Amazo
  • PyInstaller 和 Enthought 套件

    我想知道是否有人成功使用 pyinstaller 和考虑导入的脚本创建独立的可执行文件 我已经尝试这样做几天了 但是我不断收到导入错误 通过一些挖掘 我相信我可能需要添加一些隐藏的导入并创建我自己的钩子 然而 我还没有听说有人在这方面取得了
  • 人行横道项目错误“构建 ABI 'armeabi-v7a' 失败”

    我使用 ubuntu 16 04 和 crosswalk project 以及 Phonegap Cordova 来制作我的混合应用程序 我正在编译示例 https crosswalk project org documentation a
  • 在 Scala 中制作一个非常基本的二叉树

    我正在尝试在 Scala 中制作一个非常简单的二叉树 用于数据存储和遍历 现在我有 trait Tree case class Node left Tree value String right Tree extends Tree 我的问题
  • Angular 2 过滤器/搜索列表

    我正在寻找 Angular 2 的方法this http www w3schools com howto howto js filter lists asp 我只有一个项目列表 我想进行一个输入 其工作是过滤该列表