Question

我正在构建一个内置数据集的应用。我需要为这个数据集创建搜索过滤器，为此，我使用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>

当然，这不起作用。

任何人都可以帮忙解决这个问题吗？

这甚至可能吗？

谢谢！

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..it中使用自定义管道将节省您的时间。

角度管道 - 两个数据行的一个输入

1 个答案: