如何在 Angular RxJS 中过滤 Observable 数组答案

【问题标题】：How filter Observable array in Angular RxJS如何在 Angular RxJS 中过滤 Observable 数组
【发布时间】：2020-04-08 14:20:57
【问题描述】：

如何在 Angular 中过滤数组 Observable？我有可观察的数组：

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 时，我看到数组中的所有数据但输入为空..

【问题讨论】：

你不需要在每次触发按键事件时定义observable，我认为你应该删除这部分，另外，根据你过滤列表的字段，目前我可以看到object == 输入值，还有为什么你使用 this.inputControl.value 当你已经将它作为你的 observable 发射项 [list, input] 的一部分时，输入参考这个值
我编辑了我的方法，我必须在哪里删除可观察的部分？
我必须删除这个方法并且只做这个。filteredData$= combineLatest..?
是的，不需要在每次按键时都这样做，只需执行一次，在 init 或其他操作时完成
我也认为这就是你要找的list.filter(e => e.creator_login == input)

标签： angular typescript filter rxjs

【解决方案1】：

在 ReactiveForm 中使用 FormGroup--> FormBuilder --> FormControl 模式

【讨论】：