首页 > 解决方案 > 在angular7中面临管道过滤器的问题

问题描述

由于找不到管道“shipperFinder”而面临错误*ngFor="let item of shipperList | shipperFinder : listsearch"

我已经创建了自定义管道作为声明数组部分的 app.module.ts 中声明的角度和管道类名称的语法。当我在中使用管道名称时

@Pipe({
   name: 'shipperFinder'
})

在 html 代码中面临错误,因为找不到 shipperFinder 管道

<input type="text" name="search" placeholder="search here...." size="30" [(ngModel)]="listsearch">

<tr *ngFor="let item of shipperList | shipperFinder : listsearch">
                  <td>{{item.id}}</td>
                  <td>{{item.name}}</td>
                  <td>{{item.city}}</td>
                  <td>{{item.state}}</td>
                  <td>{{item.contact_no}}</td>
                  <td>{{item.email_id}}</td>
                  <td>

                    <a class="danger p-0" data-original-title="" title="" (click)="deleteuser(item.id)">
                      <i class="ft-x font-medium-3 mr-2"></i>
                    </a>
                  </td>
                  <td>
                    <a class="success p-0" data-original-title="" title="" (click)="editUser(item.id)">
                      <i class="ft-edit-2 font-medium-3 mr-2"></i>
                    </a>
                  </td>
                </tr>

管道代码

import { Pipe, PipeTransform } from '@angular/core';
import { Shipper_master } from './shared/model/shipper.model';


@Pipe({
    name: 'shipperFinder'
})

export class ShipperFinderPipe implements PipeTransform {
    transform(value: Array<Shipper_master>, filterby : string): Shipper_master[] {
        if(!value){
            return [];
        }

        if(!filterby) {
            return value;
        }
       filterby = filterby.toLocaleLowerCase();
        return filterby ? value.filter((pro: Shipper_master) => pro.name.toLocaleLowerCase().includes(filterby)) : value;
    }
}

然后在 app.module.ts 中添加管道类名称

declarations: [
      AppComponent,
      FullLayoutComponent,
      ContentLayoutComponent,
      GenerateBlComponent,
      GenerateInvoiceComponent,
      ShipperFinderPipe
    ],

标签: angulartypescript

解决方案


推荐阅读