Angular - выполнение фильтра при изменении значения текстовых полей

#angular

Вопрос:

Я пытаюсь преобразовать ng5-slider в текстовое поле min и max для фильтрации списка товаров по минимальной и максимальной цене.

Текущий ползунок:

 <ng5-slider [(value)]="priceValue" [(highValue)]="highPriceValue" (valueChange)="filterProducts()"></ng5-slider>

TS:

  filterProducts() {
     this.proposalService.searchFiltereddata = this.proposalService.searchFiltereddata.filter(x => x.monthlyCost >= this.priceValue amp;amp; this.highPriceValue >= x.monthlyCost);
 }

Предполагая, что этот ползунок работает должным образом с моделью и службами, как бы я настроил 2 текстовых поля для достижения того же результата?
У меня возникли проблемы с тем, использовать [value] или [ngModel . Должен ли я фильтровать продукты (ngModelChange) ? С чем я работаю до сих пор:

 <label>Min Price</label>
<input type="text" [value]="priceValue" [ngModel]="priceValue" (ngModelChange)="filterProducts()">

<label>Max Price</label>
<input type="text" [ngModel]="highPriceValue" (ngModelChange)="filterProducts()">

Любой совет о том, как двигаться вперед, был бы весьма признателен.

1. Одним из подходов было бы использовать combineLatest подписку .valueChanges() для каждого текстового поля. Вы получите массив значений, по одному для каждой подписки, который затем можно использовать для фильтрации ваших данных.

Ответ №1:

Демонстрационный код здесь

Вы можете достичь этого, используя привязки ngModel и ngModelChange в angular, как показано ниже:

 <div class="row">
                    <div class="col">
                        <input type="number" name="priceMinValue" [(ngModel)]="priceMinValue" class="form-control"
                            min="0" [max]="priceHighValue" (ngModelChange)="filterProducts()" placeholder="Min Value">
                    </div>
                    <div class="col">
                        <input type="number" name="priceHighValue" [(ngModel)]="priceHighValue" class="form-control"
                            [min]="priceMinValue" max="99999" (ngModelChange)="filterProducts()"
                            placeholder="Max Value">
                    </div>
                </div>


filterProducts(): any {
    this.searchFiltereddata
      = this.data.filter(x => x.monthlyCost >= this.priceMinValue amp;amp; this.priceHighValue >= x.monthlyCost);
  }