如何将合并与角度的受试者使用

发布于 2025-02-12 13:31:13 字数 1231 浏览 2 评论 0原文

目标：一个带有3个输入的组合过滤器来过滤某些列表

限制：

不应强迫用户完成所有可用的过滤器，以提交
第一个提交，一旦用户输入，
一旦有多个

我的看法，就会组合不同的输入： 我将输入数据从3个不同的输入组件发送到服务中的受试者，该主题应充当输入和实际组合之间的事件发射器，以便能够根据

export class FilterInputStoreService {
  public selectedTypesHandler = new Subject<string>();
  public selectedPrivacyOptionsHandler = new Subject<boolean>();
  public searchInputHandler = new Subject<boolean>();
  constructor() {}
}

我尝试使用的过滤器组合组件中的需要并根据需要在需要的情况下选择不同的输入。听“如果一个主题发送某些东西，并使用Mergewith将其与其余的东西结合在一起。

this.filterInputStore.selectedTypesHandler
    .mergeWith(this.filterInputStore.searchInputHandler, this.filterInputStore.selectedCurrenciesHandler )
    .map(() => {
       this.combinedDataObject = {
       Here i combine the values, doesnt matter for the question
        };
         }),
        tap(() => {
          this.filterService.newFilterData(this.combinedDataObject);
        })
       )
        .subscribe();

问题：

它说Mergewith不能与受试者一起使用
其他操作员组合不起作用，因为它们需要等到每个来源有输入。
无法使用chativionorsubject，因为发出的初始值是无效的，导致过滤器崩溃

原文

Goal: A Combined Filter with 3 Inputs to filter some list

Restrictions:

The User should not be forced to complete all available filters to submit
The first submit should happen once the user inputs
Different Inputs are combined once there is more than one

My Take:
I send the input data from the 3 different input components to Subjects in a Service that should act as event emitter between input and the actual combination, to be able to reuse and cherry pick different inputs as needed

export class FilterInputStoreService {
  public selectedTypesHandler = new Subject<string>();
  public selectedPrivacyOptionsHandler = new Subject<boolean>();
  public searchInputHandler = new Subject<boolean>();
  constructor() {}
}

In the filter combination component i try to "listen" to if a subject sends something and combine it with the rest using mergeWith.

this.filterInputStore.selectedTypesHandler
    .mergeWith(this.filterInputStore.searchInputHandler, this.filterInputStore.selectedCurrenciesHandler )
    .map(() => {
       this.combinedDataObject = {
       Here i combine the values, doesnt matter for the question
        };
         }),
        tap(() => {
          this.filterService.newFilterData(this.combinedDataObject);
        })
       )
        .subscribe();

Problem:

It Says mergeWith cannot be used with Subjects
Other operators like
combineLatest dont work because they require to wait until every of
the sources has an input.
Cant use Behaviorsubject because that emits an initial value which is null, causing the filter to crash

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

嗫嚅 2025-02-19 13:31:13

Mergewith，例如Merge与主题无缝地工作。

示例：

import { Subject } from 'rxjs';
import { mergeWith } from 'rxjs/operators';

const s1 = new Subject<string>();
const s2 = new Subject<string>();
const s3 = new Subject<string>();

s1.pipe(mergeWith(s2, s3)).subscribe(console.log);


s1.next('1')
s2.next('12')
s3.next('123')

// output 1, 12, 123.

stackblitz

mergeWith, like merge works seamlessly with Subjects.

Example :

import { Subject } from 'rxjs';
import { mergeWith } from 'rxjs/operators';

const s1 = new Subject<string>();
const s2 = new Subject<string>();
const s3 = new Subject<string>();

s1.pipe(mergeWith(s2, s3)).subscribe(console.log);


s1.next('1')
s2.next('12')
s3.next('123')

// output 1, 12, 123.

Stackblitz

回复收藏 0 原文

~没有更多了~