Как фильтровать наблюдаемый массив в Angular RxJS

Question

Как я могу отфильтровать массив, наблюдаемый в Angular? У меня есть наблюдаемый массив:

announcementList$: Observable<Announcement[]> = this.announcementService.getAnnouncement(0,0).pipe(filter(Boolean),shareReplay(), map(({data}) => data));

This list when get response from server have this array:
        {
            "id": 109,
            "title": "Tytul 231231242342342342342342342",
            "body": "testowanie",
            "id_creator": 1,
            "creator_login": "landrynek",
            "created_at": "2020-04-08 13:58:45",
            "updated_at": "2020-04-08 14:48:24",
            "status": 1,
            "accepted_at": null,
            "deleted_at": null
        },
        {
            "id": 110,
            "title": "Tytul 231231242342342342342342342",
            "body": "testowanie",
            "id_creator": 1,
            "creator_login": "landrynek",
            "created_at": "2020-04-08 14:24:25",
            "updated_at": "2020-04-08 14:41:09",
            "status": 1,
            "accepted_at": null,
            "deleted_at": null
        },
        {
            "id": 112,
            "title": "Tytul 231231242342342342342342342dsaasassdadasda",
            "body": "testowanie sadasasa",
            "id_creator": 1,
            "creator_login": "landrynek",
            "created_at": "2020-04-08 14:24:34",
            "updated_at": "2020-04-08 14:48:55",
            "status": 1,
            "accepted_at": null,
            "deleted_at": null
        }

Массив фильтра:

 filteredData$:Observable<any[]>;

Мой интерфейс Объявление:

export interface Announcement{
    id: number;
    title: string;
    body: string;
    id_creator: number;
    creator_login: string;
    created_at: Date;
    updated_at: Date;
    status: number;
    acepted_at: Date;
    deleted_at:Date;
    price?: number;
    number_of_workers?: number;
    available?: Date;
    end_available?: Date;
}

Ввод в html и мой component.ts:

<input type="text" (keyup)="updateFilter()" [formControl]="inputControl" required />

(component.ts)
inputControl = new FormControl();

И мой метод:

updateFilter() {
    this.filteredData$ = combineLatest(
      this.announcementList$,
      this.inputControl.valueChanges.pipe(
        startWith(""),
        debounceTime(400)
      )
    ).pipe(
      distinctUntilChanged(),
      filter(([list, input]) => Boolean(list)),
      map(([list, input]) => {
        return list.filter(
          ({ creator_login }) => creator_login === input);
      })
    );
    this.announcementList$ = this.filteredData$;

    this.table.offset = 0;
  }

Когда я пишу любую строку в моих входных данных не фильтруется .. Как я могу отфильтровать и показать результат в моей таблице HTML? Когда я в списке console.log в последнем фильтре, я вижу все данные в массиве, но ввод пуст ...

Answer 1

Используйте FormGroup -> FormBuilder -> Шаблон FormControl в ReactiveForm