在 Angular 6 中创建自定义管道到 return 基于数组的值

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

这是因为，您的代码 returns 如果无法在索引 0 处找到您要查找的术语，则为空字符串。

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

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

Answer 2

你接近了，但请注意，当你 return 来自 for 循环的东西时，你只是停止它，而不是 return 每个值。在您的情况下，更合适的方法是创建一个空数组，并将必要的值推送给它，如下所示：

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.

在 Angular 6 中创建自定义管道到 return 基于数组的值

Creating a custom pipe in Angular 6 to return a value based on an array

typescript

angular

angular6