html - 使用 Angular 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>

标签： htmlangular