时间戳

首页 > 解决方案 > 管道变换功能

angular - 管道变换功能

问题描述

我是 Angular 的新手。

你能解释一下转换函数是如何工作的，例如在这个例子中： search input field in angular？

在第一个答案中，有一个：

transform(value: any, searchValue): any {
    if (!searchValue) return value;
    return value.filter((v) => 
    v.name.toLowerCase().indexOf(searchValue.toLowerCase()) > -1 || 
    v.size.toLowerCase().indexOf(searchValue.toLowerCase()) > -1)

  }

这段代码有什么作用？

if (!searchValue) return value;

标签： angularpipe

解决方案

您的管道变换方法有 2 个参数value和searchValue. 它会检查您的 searchValue 是否为 falsy 。如果它是虚假的，它将按原样返回 value 参数。否则它将根据传递的 searchValue 过滤值数组。通过检查包含 searchValue 的值数组的每个项目的名称或大小（转换为小写）字段来完成过滤。

注意：JavaScript 中只有六个假值：undefined、null、NaN、0、""（空字符串）和 false

在模板中使用管道

{{ value | pipename:searchValue }}

pipename- 是你的管道名称
value- 是你的转换方法的第一个参数
searchValue- 是你的转换方法的第二个参数

推荐阅读