Angular Pipes — один вход для двух строк данных

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

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

Ввод: имя

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

Я попытался создать 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>

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

Может ли кто-нибудь помочь с решением этого?

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

Благодарю вас!


angular angular2-pipe
person mighty_mike    schedule 25.12.2017    source источник
comment
Можете ли вы добавить код, где используются трубы?   -  person Dhyey    schedule 25.12.2017
comment
Ваша ошибка заключается в использовании для этого труб. Каналы используются для форматирования строк, а не для бизнес-логики. Также платформа называется Angular, а не Angular 2. Второй версии больше года, и больше нет причин ее использовать.   -  person Lazar Ljubenović    schedule 25.12.2017
comment
angular.io/guide/pipes#appendix-no-filterpipe-or- заказ по трубе   -  person JB Nizet    schedule 25.12.2017

Ответы (1)


arrow_upward
0
arrow_downward

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

<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. Это сэкономит ваше время.

person Prashant M Bhavsar    schedule 13.02.2018