Фильтр с использованием раскрывающегося списка и текстового поля в угловых 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>