Угловая труба не обнаруживает изменения с несколькими аргументами

Question

Короче говоря, у меня есть:

1. Примечание: для отображения массива автомобилей:

   <div class="carContainer" *ngFor="let car of 
   cars | carFilter: brand : color">
   

2. Поле поиска, являющееся первым аргументом фильтра.

   <input type="text" class="form-control" 
   placeholder="Search car brand" [(ngModel)]="searchInput">
   

3. Выберите поле, являющееся вторым аргументом.

   <select class="form-control" [(ngModel)]="color">
     <option value="red">red</option>
     <option value="blue">blue</option>
     <option value="black">black</option>
     <option value="orange">orange</option>
   </select>
   

Когда я что-то печатаю в строке поиска, срабатывает фильтр. Я также подтвердил, что значение из поля выбора переходит к carFilter. Проблема в том, что ... , когда я изменяю значение только в поле выбора, фильтр carFilter не срабатывает.

Если я удалю аргумент searchBar из фильтра, тогда изменения в поле выбора активируют фильтр. Как заставить канал обнаруживать изменения в обоих / нескольких аргументах?

Answer 1

Хорошо, после нескольких проб и ошибок, я понял это.Если вам нужны триггеры для нескольких аргументов, таких как sortBoxInput и searchBoxInput , вам нужно создать два отдельных фильтра.Я думаю, это очевидно для тех, кто более привык к угловой, но я новичок.

Поэтому я разделил свой единственный фильтр на два, которые являются searchFilter и sortFilter.

Затем я изменилhtml to:

    <div class="carsContainer" 
    *ngFor="let car of cars | searchFilter : brand | sortFilter : color">

Answer 2

Возможно, вы не правильно получаете аргументы.

transform(value: string[], ...args: any[]): string[] {}

убедитесь, что вы получаете массив со значением в первых аргументах и ​​массивом свойств во втором.