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

发布时间：2020-12-17 07:06:55 所属栏目：安全来源：网络整理

导读：我正在创建一个似乎不起作用的简单自定义管道：这是我在CLI创建的管道中的代码： – (contains.pipe.ts) import { Pipe,PipeTransform } from '@angular/core';@Pipe({ name: 'contain'})export class ContainPipe implements PipeTransform { transform(li

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

这是我在CLI创建的管道中的代码： – (contains.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>

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

解决方法

你很接近,但请注意,当你从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;
}

在这里,我只是推送术语值,但您可以根据需要修改此块.这是一个STACKBLITZ.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!