angular - Observables：创建一个模拟 http 请求

Question

我正在尝试使用 observables 在没有后端 api 的情况下测试我的前端代码。在我的组件模板中，我有一个 textarea。最终我需要使用 http.post 将 textarea 内容发送到后端 api 并接收回内容的验证。

在我的 component.ts 的构造函数中，我定义了一个 observable，它执行一些非常基本的检查并在 2000 毫秒超时后创建模拟结果（如 http.post/http.get）：

private obsVal: Observable < any >;
private obsChange: Observable < any >;

constructor() {

   this.obsVal = Observable.create(observer => {

       setTimeout(() => {
          let errorInfo = {};
          let val = Math.floor(Math.random() * 10) + 1;

          if (val < 6) {
              errorInfo['error'] = true;
              errorInfo['info'] = "Error! Unknown expression encountered.";
          } else {
              errorInfo['error'] = false;
          }
          observer.next(errorInfo);

      }, 1000)
  });

在 textarea 内的任何更改都会调用以下函数（创建另一个 observable 并订阅它）：

textarea.on('change', () => {
     this.obsChange = Observable.create(observer => {
             observer.next("some text inside textarea");
             })

     this.obsChange.pipe(
         debounceTime(400),
         distinctUntilChanged(),
         switchMap((text) => {
             return this.obsVal
         })
     )
     .subscribe(errorResp => {
         this.addPanel(errorResp)
     });
  })

addPanel在文档中添加一个 DOM 元素以显示响应。

我使用了 debounceTime、distinctUntilChanged 和 switchMap，以便在用户连续键入时只呈现最新的请求。但是，管道中的这些运算符似乎无法正常工作，因为我一个接一个地收到所有响应。

当然，我在这里犯了一些重大的概念错误。有人可以指出吗？

注意： textarea 元素是在组件内部动态创建的，因此我无法访问(change)="doSomething()"此事件。

更新： 我试图像这篇文章一样更新我的代码。

我没有在每次更改时都传递订阅，而是创建了一个主题并在 ngOnInit() 中调用它的订阅：

ngOnInit() {
this.subscription = this.obsChange.pipe( //obsChange is  the subject
             debounceTime(400),
             distinctUntilChanged(),
             switchMap((text) => {
                 return this.obsVal
             })
         )
         .subscribe(errorResp => {
             this.addPanel(errorResp)
         });
}

在更改事件上，我没有创建一个新的 obsChange 可观察对象，而是将 next() 调用到现有对象：

textarea.on('change', () => {
         this.obsChange.next("some text");
      })

这是第一次工作，但在进一步更改时调用 next() 但它不会触发 ngOnInit() 中的 obsChange。

标签： angularrxjshttprequestobservablesubscribe