Фильтр на коврике

Question

Мне нужно отфильтровать данные для выбора, потому что есть слишком много вариантов.Я сделал это так:

        <mat-form-field>
          <mat-select placeholder="Unit.." (change)="onTabChange(element, $event.value.id, 'assignedUnit')">
            <input matInput type="text" (keyup)="filterListCareUnit($event.target.value)">
            <mat-option *ngFor="let careUnit of listCareUnits" [value]="careUnit">
              {{ careUnit.label }}
            </mat-option>
          </mat-select>
        </mat-form-field>

при поднятии ключа, я звоню filterListCareUnit($event.target.value)

, но в этой функции я не знаю, использовать ли фильтр rxjs

У меня есть listCareUnits, и я хочу удалить все объекты, которые не содержат $event.target.value

, на данный момент я сделал это, но, очевидно, не работает, мой список всегда содержит одни и те же элементы:

  filterListCareUnit(val) {
    console.log(val);
    this.listCareUnits.filter((unit) => unit.label.indexOf(val));
  }

Новичок в angular / rxjs .. Спасибо за помощь

Answer 1

Я знаю, что на этот вопрос уже получен ответ, но вы могли бы также использовать "mat-select-filter".

https://www.npmjs.com/package/mat-select-filter

Надеюсь, это поможет кому-то еще.

Answer 2

Вы должны назначить возвращенный отфильтрованный список.

 filterListCareUnit(val) {
    console.log(val);
    this.listCareUnits = this.listCareUnits.filter((unit) => unit.label.indexOf(val) > -1);
  }

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

anotherArray = this.listCareUnits;
filterListCareUnit(val) {
        console.log(val);
        this.listCareUnits = this.anotherArray.filter((unit) => unit.label.indexOf(val) > -1);
      }