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

Question

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

这是我在 CLI 创建的管道中的代码：- (contain.pipe.ts)

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

@Pipe({
  name: 'contain'
})
export class ContainPipe implements PipeTransform {

  transform(likes: any, term: any): any {

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

}

这是我的组件只是尝试输出喜欢与否：- (recipe.component.html)

<h2>{{ [1,12,3] | contain:12}}</h2>

好像没有输出任何数据，即使是真的！

Answer 1

你已经接近了，但请注意，当你 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;
}

这里我只是推送term 值，但您可以根据需要修改此块。这是STACKBLITZ。

Answer 2

这是因为，如果在索引 0 处找不到您要查找的术语，您的代码将返回一个空字符串。

以下循环从索引 0 开始，检查项是否等于当前元素。如果是，则返回liked，如果不是，则返回空字符串。它不会遍历整个数组。

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': '';
  }