使用角度4

Question

我正在以角度4进行过滤。对于过滤，我使用的是文本框和下拉列表。在表格中，我有字段发票编号，客户名称，状态，金额。我正在下拉列表中过滤所有状态（可能的状态是付费，未付款，打开等）。所有其他字段，如发票号，客户名称和金额，都使用文本框进行过滤。它现在单独过滤。我现在想要的是将两者结合起来。也就是说，在基于下拉列表过滤后，选择状态，如果第一个结果也需要文本框过滤，则使用文本框再次过滤结果，反之亦然

Component.ts代码：

status = ['All', 'Unpaid and sent', 'Unpaid with due date', 'Paid', 'Open', 'Overdue'];
 _listFilter: string;
    get listFilter(): string {
        return this._listFilter;
    }
    set listFilter(value: string) {
        this._listFilter = value;
        this.filteredInvoice = this.listFilter ? this.performFilter(this.listFilter) : this.invo;
    }
    filteredInvoice: IInvoice[];
    invo: IInvoice[] = [];
 onOptionsSelected() {
        /
        console.log(this.selected);

        let today: Date = new Date();
        switch (this.selected) {
            case "All":
                this.invo = this.route.snapshot.data['invoices'];
                break;

       case "Paid":
                this.filteredInvoice = this.invo.filter(invoice => invoice.status == "Paid" );
                break;
            case "Unpaid and sent":
                this.filteredInvoice = this.invo.filter(invoice => invoice.status == "Sent");
                break;

            case "Unpaid within due date":
                this.filteredInvoice = this.invo.filter(invoice => invoice.status == "Sent" && today <= invoice.dateDue);
                break;
            case "Overdue":
                this.filteredInvoice = this.invo.filter(invoice => invoice.status == "Sent" && today > invoice.dateDue);
                break;

        }

    }





    performFilter(filterBy: any): IInvoice[] {
       filterBy = filterBy.toLocaleLowerCase();
        return this.invo.filter((inv: IInvoice) =>
           (inv.clientName.toLocaleLowerCase().indexOf(filterBy) !== -1) || (inv.invoiceNumber.toLocaleLowerCase().indexOf(filterBy) !== -1)
            ||  (inv.dateCreated.toString().toLocaleLowerCase().indexOf(filterBy) !== -1)
            || (inv.dateDue.toString().toLocaleLowerCase().indexOf(filterBy) !== -1) || (inv.grandTotal.toString().toLocaleLowerCase().indexOf(filterBy) !== -1));




    }


   HTML Code:

<div class="row">
    <div class="col-md-2">Filter by:</div>

    <input type="text" [(ngModel)]="listFilter" name="clientName" />
</div>
<div class="col-md-2">




</div>

<div class='row'>
    <div class='col-md-6'>
        <h3>Filtered by: {{listFilter}} </h3>
    </div>
</div>
<select [(ngModel)]="selected" name="status" placeholder="select" (ngModelChange)="onOptionsSelected($event)">
    <option *ngFor="let sta of status" [ngValue]="sta">{{sta}}</option>
</select>