RXJS 中 Observable 和 Subject 的异同

Posted 2023-03-31

参考技术A

最近对 RXJS 中的 Observable 和 Subject 有了更多的了解，特在此记录。

在 pull 系统中， 消费者 决定何时从数据 生产者 中接收数据，生产者本身不知道数据何时会被传递给消费者，调用函数就是一个典型的 pull 系统，函数本身不知道何时会被调用，只有调用函数的人才知道。

而在 push 系统中， 生产者 决定何时将数据发送给 消费者 ， 消费者不知道何时接收数据， Observable 就是一个典型的 push 系统。

输出：

输出：

上面是相同之处，接下来说一下不同之处。

输出：

总结： Function 只能 同步 的 return 单值 , 而 Observable 既可以 同步 ，也可以 异步 的 return 单值 或者 多值 。

例如：

从例子中可以看出， Observable 的订阅结果各 不相同 ，而 Subject 的订阅结果却是 相同 的，这就是把一个值 多播 到订阅者中。
还可以看到 subject 中的观察者 obs 既可以作为 消费者 ，也能作为 生产者 ，而 Observable 中的观察者 obs 只能作为 生产者 。

文章参考自： RXJS , Stack Overflow

使用 combineLatest 和 Rxjs 返回 observable 的结果

【中文标题】使用 combineLatest 和 Rxjs 返回 observable 的结果

【英文标题】：Return result of an observable with combineLatest and Rxjs

【发布时间】：2021-03-06 11:44:33

【问题描述】：

我希望得到一个 observable 的结果，每次值改变时都会减去默认值

每次值更改时，都会用输入字段中输入的新值减去默认值

例如默认值为 5。

我在输入框中输入 4

结果是 5-4 = 1 所以我希望在输入字段“Surface ha”中显示 1

我清除字段然后输入 3 结果是 5-3 = 2 所以我希望在输入字段“Surface ha”中显示 2

所以......

如果我执行 console.log，我可以清楚地看到 observable 的结果，但是我希望将 observable 的结果显示到同一个输入字段中

我只在我的开发控制台中得到这种错误结果：

NaN

观点：

   <form [formGroup]="credentialsForm" *ngIf="credentialsForm">
    <mat-form-field class="example-full-width">
        <mat-label>Surface Ha</mat-label>
        <input matInput type="number" [value]="surface" placeholder="Libellé" formControlName='surface'>
    </mat-form-field>

    <ion-input  class="form-control" placeholder="Valeur" 
                formControlName="0">
            </ion-input>
   </form>

组件内部：

    this.surface = 5;

    const observedValues = ['0']
    .map(key => this.credentialsForm.controls[key].valueChanges.map(value => +value).startWith(0))

    const resSurface = combineLatest(observedValues)
    .pipe(map(([value0]) =>  return this.surface - value0 ));
    

    const res = resSurface.subscribe(val =>  return val );

   // These line below should display the "res" value
    this.surface = res;

【参考方案1】：

您需要将 Observable 发出的值分配给this.surface，而不是订阅本身：

resSurface.subscribe(val => this.surface = val);

或者，您可以摆脱 subscribe 调用并使用 Angular async 管道直接绑定到 Observable：

this.resSurface = combineLatest(observedValues)
                    .pipe(map(([value0, value1, value2]) =>  return this.surface - (value0 + value1 + value2) ));

然后在你的模板中：

<input matInput type="number" [value]="resSurface | async" placeholder="Libellé" formControlName='surface'>

【讨论】：

对不起，我没有解释清楚，我希望重用“res”值在表单视图上显示它

啊，我想我明白了 - 我已经编辑了我的答案。

resSurface.subscribe(val => this.surface = val);重新定义 this.surface 但我希望返回 observable 的结果，而不是将 this.surface 重新定义为 observable 本身

【参考方案2】：

我忘了从不同的默认值开始！

            let defaultValueSurface = 5;

            const observedValues = ['0']
            .map(key => this.credentialsForm.controls[key].valueChanges.map(value => +value).startWith(0))

            const resSurface = combineLatest(observedValues)
            .pipe(map(([value0]) =>  return defaultValueSurface - value0 ));
            
        
            const res = resSurface.subscribe(val =>  return val );

         
            this.surface = res;