Question

要创建实体，用户提交表单。他连续多次单击提交按钮，这将导致创建多个相同的实体。我们想要防止这种情况。我们怎么能这样做？

显然我们可以引入一个加载标志，最初将设置为false，并在进行api调用时设置为true。使用此标志我们可以禁用提交按钮。

然而，我正在寻找另一种更实用的方法，可能使用skipUntil运算符：

从源中跳过发出的值，直到提供可观察的值。

首先，我们有一系列提交事件。如果正在进行更新，则应跳过提交事件。我尝试了什么：

// form reference
@ViewChild('form') form;
// reference to update observable
update$: Observable<any> ;

ngOnInit() {
    Observable.fromEvent(this.form.nativeElement, 'submit')
        .do(() => {
            // get values from form
        })
        .skipUntil(this.update$)
        .mergeMap(() => {
            this.update$ = this.datasource.update(..);
            return this.update$;
        })
        .subscribe()
}

正如你所看到的，我在这里遇到了某种困境。 this.update$在序列的后面定义。因此抛出了以下错误：

You provided 'undefined' where a stream was expected.

知道如何解决这个问题吗？

Answer 1

实际上skipUntil在这里不是一个好选择，因为它会在this.update$ mergeMap()内部发出之前跳过所有内容。但这发生在skipUntil之后仍然会忽略所有内容，因此永远不会调用mergeMap()。

相反，您可以使用throttle并使用主题触发它：

const subject = new Subject();

Observable.fromEvent(this.form.nativeElement, 'submit')
    .do(() => {
        // get values from form
    })
    .throttle(subject)
    .mergeMap(() => {
        this.update$ = this.datasource.update(..).do(subject);
        // maybe it makes more sense to trigger `subject` in the subscribe callback instead of here.
        return this.update$;
    })
    .subscribe()

作为表单提交的结果，跳过api调用，直到第一个api调用发出一个值

1 个答案: