如何从可观测角度8+求初值

Question

我有一个页面表单，它的值已经设置好了，前一个和下一个按钮元素。

在ngOnInit，我从一个可观察到的中得到一个包含3项的列表，作为初始值--有时我得到4项。

在进入下一页之前，我必须单击一个按钮，即，该按钮将调用将发出请求的函数calculate()，并且我的可观察列表将包含4项。

因此，当我单击next按钮onNextButton()时，我希望使用初始值与当前进行比较，如果它们是相同的，或者检查这个列表是否有任何更改(任何增量)。

按照我所做的方式，我没有设法保留/存储第一个值。在“下一步”按钮单击时，我将得到更新的值，而不是前面的值。

我的代码：

export class PageComponent implements OnInit {

   questions$: Observable<any[]>;
   hasChange: boolean;

   ngOnInit() {

     // GETTING INITIAL VALUE
     this.questions$.subscribe((quest: any[]) => {
        this.hasChange = quest.length > 3 ? true : false
     });
   }

   calculate() {
      // calling a request
      // at this point, my observable will update and will have 4 items.
   }

   onNextButton() {
      if (hasChange) {
         // submit()
      } else {
         // navigate()
      }
   }
}

因此，在这个场景中，初始值应该是一个列表w/ 3项，但是我得到了4，它破坏了我的逻辑……

如何获得可观测值的前一个值并将其存储在变量中？或者，我如何检测到任何变化？

我尝试了behavioursubject和pairwise从RxJS，但我不知道如何应用它。

谢谢！

Answer 1

正如您已经说过的，您必须使用ReplaySubject或BehaviourSubject，因为可观察到没有用于检索上次发出值的“内存”。ReplaySubject和BehaviourSubject是相似的，它们都在订阅时发送最后发出的值，但是ReplaySubject只在订阅上发出最后发出的值，而BehaviourSubject存储最后发出的值的列表(可配置的大小)。我将使用BehavoiurSubject，因为它更完整一些。

只需将您使用的可观察到的内存替换为BehaviourSubject，并记住在实例类时必须定义该内存大小。例如，您可以创建一个返回BehaviourSubject的方法，最后一个布尔值存储如下：

private fooBehaviourSubject;

function ngOnInit: void{
    this.fooBehaviourSubject = new BehaviorSubject<boolean>(1); // 1 is the "stack" size
    this.fooBehaviourSubject.next(true); // <- First value emitted here
}

function getValue: BehaviourSubject<boolean> {
    return this.fooBehaviourSubject;
}

当你像这样订阅：

getValue().subscribe(e => console.log(e))

最后一个存储的值(true)将自动检索并显示在控制台中，但至少要确保您已经发出了一个，否则在调用下一个方法之前不会执行订阅。在此之后，值的每次更新都将触发带有更新值的console.log。

应用到您的代码中，您可以在BehaviourSubject中创建ngOnInit，也可以在ngOnInit中订阅它来定义回调事件，并在列表必须更新后调用BehaviourSubject的下一个方法。

Answer 2

export class PageComponent implements OnInit {

    questions$: Observable<any[]>
    hasChange: boolean

    ngOnInit() {

        // GETTING INITIAL VALUE
        let hasSome = false

        this.questions$
            .subscribe((quest: any[]) => {
               
               // ### This is works for me!
               hasSome = quest.some(item => item.id === 'whatever')
               
               // ### This is the way that I was trying to do. 
               // ### Is's not wrong but didn't work for me =( 
               // this.hasChange = quest.some(item => item.id === 'whatever')
        )
        this.hasChange = hasSome
    }

    calculate() {
        // calling a request
        // at this point, my observable will update and will have 4 items.
    }

    onNextButton() {
        // ### Now this.hasChange is assigned once and where I want, OnInit.
        if (this.hasChange) {
            // submit()
        } else {
            // navigate()
        }
    }
}