Question

面对错误，因为找不到管道'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
    ],

Angular7中的管道过滤器面临问题

0 个答案: