RXJS - Фильтр, кажется, фильтрует, но результаты все еще показывают нефильтрованный

Question

Я использую RXJS 6.3.3.

У меня есть следующий код, который должен отфильтровать уже выбранные вещицы.

Так что, если у меня есть:

Gizmos = "Red", "Blue", "Green"

И пользователь выбирает «Синий».

Я должен видеть только «Красный» и «Зеленый» в качестве доступных вариантов.

Однако я все еще вижу «Красный», «Синий»"," Зеленый ".

При отладке выясняется, что фильтр работает в следующем примере:

Red:true Blue:false Green:true

Я не уверен, что мне не хватает, потому что пользовательский интерфейс все еще показываетвсе 3 значения.

      <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
        <mat-option *ngFor="let gizmp of filterGizmos | async" [value]="gizmo.value" (onSelectionChange)="gizmoSelectionChange(gizmo)">
          {{gizmo.value}}
        </mat-option>
      </mat-autocomplete>



   filterGizmos: Observable<Gizmo[]>;
   this.filterGizmos = this.filterGizmoData(this.searchTerm.value); 

   filterGizmoData(searchString?: string): Observable<Gizmo[]> {
    let tfp = new GizmoFindParameters();

    if (searchString == undefined) {
      tfp.value = "";
    } else {
      tfp.value = searchString.trim();
    }

    return this.gizmoService.find<Gizmo[]>(tfp)
      .pipe(tap(x =>
        x.filter((y) => {
          console.log(y.value);
          console.log(!this.selectedGizmos.includes(y.value)); 
          return !this.selectedGizmos.includes(y.value);
        })
      )
      );
  };

Answer 1

tap не изменяет поток.Он часто используется для отладки и для побочных эффектов (операций, которые не влияют на поток).

Используйте взамен map.

Это из документации для tap:

Выполните побочный эффект для каждого излучения на наблюдаемом источнике, но верните наблюдаемое, идентичное источнику.