在Angular 6中创建自定义管道以基于数组返回值

我正在创建一个简单的自定义管道，但似乎不起作用：

这是我在由CLI创建的管道中的代码：-（contain.pipe.ts）

从'@angular/core'导入{Pipe，PipeTransform}；
@烟斗({
名称：“包含”
})
导出类ContainPipe实现PipeTransform{
变换（喜欢：任意，术语：任意）：任意{
for（var i=0；i

下面是我的组件，它只是试图输出喜欢与否：-（recipe.component.html）

{[1,12,3]| contain:12}

---

它似乎没有输出任何数据，即使它是真的

这是因为，如果代码在索引0中找不到要查找的术语，则返回空字符串

下面的循环从索引0开始，检查该项是否等于当前元素。如果是，则返回

，

，如果不是，则返回空字符串。它不会遍历整个数组

for (var i = 0; i < likes.length ; i++) {
    if (likes[i] === term) {
        return "liked";
    } else{
        return "";
    }
}

---

很接近，但请注意，当您从

for

循环中

返回某个内容时，您只是停止它，而不是返回所有值。在您的情况下，更合适的方法是创建一个空数组，并向其推送必要的值，如下所示：

transform(likes: any, term: any): any {
    var liked = [];
    for (var i = 0; i < likes.length ; i++) {
        if (likes[i] === term) {
            liked.push(term);
        }
    }
    return liked;
}

transform（like:any，term:any）：any{
var=[]；
for（var i=0；i

这里我只推送
术语
值，但您可以根据需要修改此块。这是一个。
你真是太棒了，谢谢你，你只有几分钟的时间，我试图传递一个数组，比如{{arr$| contain:recipe.id}，但我似乎失败了很多？@MohamedGabr，当然，我会帮你的。让我知道，什么是
arr$
和
recipe.id
？或者更好地使用stackblitz并修改它，这将更容易提供帮助。好的，请看一下这里的recent-blog-recipes.component，我从我创建的API中获取数组，并将其作为数组返回，然后我尝试将每个recipe.id与该数组进行比较。这是它在控制台（3）[1,2,12]中的外观，它是一个数组，但当我编译“TypeError:无法读取ContainPipe.push../src/app/contain.pipe.ts上未定义的属性'indexOf'时，它给出了这个错误。”但当我像这样输出它时，它似乎输出良好，这是src/app/welcome/recent blog recipes/你真是太棒了，谢谢，你只有几分钟的时间，我正试图传递一个数组，比如{arr$| contain:recipe.id}，但我似乎失败了很多？@MohamedGabr是数字数组格式的
arr$
？它的内容是什么？但它是如何在所有元素中迭代的呢？不可能sense@MohamedGabr
indexOf
是一种数组方法。它返回传递到的项的索引，否则返回-1。
for (var i = 0; i < likes.length ; i++) {
    if (likes[i] === term) {
        return "liked";
    } else{
        return "";
    }
}

  transform(likes: any, term: any): any {
      return likes.indexOf(term) > -1 ? 'liked': '';
  }

transform(likes: any, term: any): any {
    var liked = [];
    for (var i = 0; i < likes.length ; i++) {
        if (likes[i] === term) {
            liked.push(term);
        }
    }
    return liked;
}