Угловые трубы - один вход для двух строк данных

Question

Я создаю приложение, в котором есть набор данных. Мне нужно создать поисковые фильтры для этого набора данных, и для этого я использую угловые трубы.

Проблема в том, что я хотел бы проверить два поля данных с одним входом.

Вход: имя

Поля: Имя счета, Имя клиента.

Я пытался создать 2 отдельные трубы

Труба 1:

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

@Pipe({
  name: 'invoiceLastNameFilter'
})
export class invoiceLastNameFilterPipe implements PipeTransform {

 transform(openInvoices: any, lastName: any): any {
    if(lastName === undefined || lastName === null) return openInvoices;
        return openInvoices.filter(function(invoice){
            return invoice.Invoice_Last_Name.toLowerCase().includes(lastName.toLowerCase());
        });    
  }

}

Труба 2:

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

@Pipe({
  name: 'customerLastNameFilter'
})
export class customerLastNameFilterPipe implements PipeTransform {

 transform(openInvoices: any, lastName: any): any {
    if(lastName === undefined || lastName === null) return openInvoices;
        return openInvoices.filter(function(invoice){
            return invoice.Customer_Last_Name.toLowerCase().includes(lastName.toLowerCase());
        });    
  }

}

Трубы называются здесь:

<form>
    <div class="form-group">
        <label for="">Last name:</label>
        <input type="text" class="form-control" name="lastName" placeholder="Enter Last name..." [ngModel]="lastName" (ngModelChange)="lastName = $event">
    </div> 
</form>
<table class="table table-hover table-responsive" id="data-table">
    <thead>
        <tr>
            <th></th>
            <th>Ben</th>
    </tr>
    </thead>
        <tbody>
            <tr *ngFor="let invoice of openInvoices | customerLastNameFilter: lastName | invoiceLastNameFilter: lastName">
                <td>{{ invoice.Invoice_Last_Name }}</td>
                <td>{{ invoice.Customer_Last_Name }}</td>
        </tr>
    </tbody>    
</table>    

Конечно, это не работает.

Кто-нибудь может помочь с решением этой проблемы?

Это вообще возможно?

Спасибо!

Answer 1

Замените приведенный ниже код своим кодом:

<tr *ngFor="let invoice of (openInvoices | customerLastNameFilter: lastName | invoiceLastNameFilter: lastName)">
                <td>{{ invoice.Invoice_Last_Name }}</td>
                <td>{{ invoice.Customer_Last_Name }}</td>
        </tr>

Добавлена ​​скобка для данных и фильтров.

Вы можете проверить ниже статью о том, как создавать и использовать пользовательские трубы в Angular. http://musttoknow.com/create-custom-pipe-use-datatable-ngfor-angular/

Объяснил, как использовать пользовательский канал в ngFor. Это сэкономит ваше время.