angular - 在 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

您已经接近了，但请注意，当您从 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 值，但您可以根据需要修改此 block 。这是一个STACKBLITZ .