угловое использование одной и той же трубы для разных данных - PullRequest
Новая
       42

угловое использование одной и той же трубы для разных данных

0 голосов
/ 06 ноября 2019

У меня есть поисковый канал, который прекрасно работает на моей 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: Я нашел это , но я не мог понять это точно.

Обновление

Основываясь на ответах ниже, вот как данные счета

[
    {
        "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 | ....

Ответы [ 2 ]

2 голосов
/ 06 ноября 2019

Просто простая модификация, так что вы можете передать, какое поле для поиска для. 

@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"

Если вы хотитедля поиска счетов по идентификатору, 

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

Stackblitz: https://stackblitz.com/edit/angular-szzvxw

1 голос
/ 06 ноября 2019

Если вы ищете в поле name для products и invoices, тогда вы сможете использовать канал для обоих как есть (возможно, вы просто захотите переименовать переменные, чтобы они не только * 1004)*).

Если вы ищете в разных полях разные коллекции, то вы можете сделать канал более общим. Вы можете обновить канал так, чтобы он передавал дополнительный аргумент как объект поля поиска и условия поиска. 

@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());
    });
  }
}
...