angular 对不同的数据使用相同的管道

Question

我有搜索管道，它在我的 products 页面（数据）中工作得很好，现在我有另一组数据 invoices 我想使用同一个管道来搜索这次在发票中。

问题

如何自定义我的管道以接受 products 和 invoices 取决于页面用户搜索？

代码

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'search'
})
export class SearchPipe implements PipeTransform {

  transform(products: any[], terms: string): any[] {
    if (!products) { return []; }
    if (!terms) { return products; }
    terms = terms.toLowerCase();
    return products.filter( it => {
      return it.name.toLowerCase().includes(terms);
    });
  }

}

PS: I have but I couldn't understand it exactly.

更新

根据下面的回答，这里是发票数据的样子，

[
    {
        "id":1,
        "user_id":1,
        "name":"cargo website",
        "quantity":"1",
        "body":"frhsaeh",
        "terms":"aehyaejhu",
        "employee":"xyz company",
        "employer":"mr. xyz",
        "price":"5000000.00",
        "dp":"2500000.00",
        "remained":"2500000.00",
        "tax":"10.00",
        "start":"2019-10-28T00:00:00.000000Z",
        "ends":"2019-12-26T00:00:00.000000Z",
        "status":"on hold",
        "tracks":[
            {
                "id":2,
                "user_id":1,
                "invoice_id":1,
                "image":"http:\/\/.....test\/images",
                "body":"this is second one."
            }
        ],
        "created_at":"2019-10-27 09:43:14",
        "updated_at":"2019-10-27 09:43:14"
    }
]

更新 2

这是我的搜索栏的样子。

<ion-searchbar [(ngModel)]="terms" placeholder="{{ 'SEARCH.find_invoice' | translate }}"></ion-searchbar>

更新 3

在两个控制器中我都有这个，

descending = false;
order: number;
column = 'name';
terms = '';

sort() {
  this.descending = !this.descending;
  this.order = this.descending ? 1 : -1;
}

在两个视图中 products，invoices 我有这个，

<ion-row>
    <ion-col size="8" offset="2">
        <ion-searchbar [(ngModel)]="terms" placeholder="{{ 'SEARCH.find_invoice' | translate }}"></ion-searchbar>
    </ion-col>
</ion-row>

<div *ngIf="terms else Items">

    <ion-button float-right fill="outline" size="default" type="button" (click)="sort()">
        <ion-icon name="funnel"></ion-icon>
        {{ 'SEARCH.sort' | translate }}
    </ion-button>

    <ion-list>
        <ion-item *ngFor="let p of invoices | search : terms | sort: {property: column, order: order}" routerDirection="forward" [routerLink]="['/', 'tracks', p.user_id, p.id]">

            <!-- show items details -->
            <ion-thumbnail slot="start">
                <ion-img [src]="p.image"></ion-img>
            </ion-thumbnail>
            <ion-label>{{ p.name }}</ion-label>
        </ion-item>
    </ion-list>
</div>

<ng-template #Items>
    show ordinary list when user not searching
</ng-template>

注意：我的 products 和 invoices 搜索列表的唯一区别是这一行 *ngFor="let p of invoices | .... *ngFor="let p of products | ....

Answer 1

如果您在 name 字段中搜索 products 和 invoices，那么您应该能够按原样使用管道（可能只是想重命名变量，使其不仅仅是 products).

如果您针对不同的集合搜索不同的字段，那么您可以使管道更通用。您可以更新管道以将附加参数作为搜索字段和搜索词的对象传递。

@Pipe({
  name: 'search'
})
export class SearchPipe implements PipeTransform {
  // EXAMPLE "let product of products | search: { searchTerm, searchField }"
  transform(collection: any[], searchConfig: { searchTerm: string; searchField: string }): any[] {
    if (!collection) {
      return [];
    }
    if (!searchConfig.searchTerm || !searchConfig.searchField) {
      return collection;
    }
    return collection.filter(it => {
      return it[searchConfig.searchField]
        .toLowerCase()
        .includes(searchConfig.searchField.toLowerCase());
    });
  }
}

Answer 2

只是一个简单的修改，以便您可以传递要搜索的字段。

@Pipe({
    name: 'search'
})

@Injectable()
export class SearchPipe implements PipeTransform {
    transform(items: any[], field: string, value: string): any[] {
        if (!items) {
            return [];
        }
        if (!field || !value) {
            return items;
        }
        return items.filter(singleItem => singleItem[field].toLowerCase().includes(value.toLowerCase()));
    }
}

对于搜索产品，

*ngFor="let product of products | search : 'name' : searchText"

如果您想按 ID 搜索发票，

*ngFor="let invoice of invoices | search : 'id' : searchText"

堆栈闪电战：https://stackblitz.com/edit/angular-szzvxw