为什么返回订阅而不是可观察值？

Question

我有一个函数可以将一个项目添加到我的列表中，它返回一个可以显示一些数据的可观察对象

  add() {

    let data$ = of(this.data);

    data$.subscribe((val: any) => {
      let newData = {
        id: val.length + 1,
        description: `description ${val.length + 1}`,
        completed: false
      }

      this.data.push(newData);

      // this.list$.next(addMe);
      console.log(this.data);
      console.log(val.length);

    });

return data$;

}

但是当我像这样重构它时，它不再起作用，它说 data$ 现在是订阅而不是可观察的，但我不明白它们为什么不相等。

add(){

    let data$ = of(this.data).subscribe((val: any) => {
      let newData = {
        id: val.length + 1,
        description: `description ${val.length + 1}`,
        completed: false
      }

      this.data.push(newData);

      // this.list$.next(addMe);
      console.log(this.data);
      console.log(val.length);

    });

    return data$;

}

Answer 1

我的猜测是，您的 add 方法需要在将数据附加到它之后返回一个可观察对象。

您应该使用

BehaviourSubject

来存储实际数组，并在执行任何新操作时触发 next 方法，因此代码将如下所示。

data$ = new BehaviourSubject([]);

add(){

    let data$ = of(this.data).subscribe((val: any) => { // <- try getting rid of the subscribe instead access the latest data using this.data$.value
      let newData = {
        id: val.length + 1,
        description: `description ${val.length + 1}`,
        completed: false
      }
      const transformedData = [ ...this.data$.value, newData ];
      this.data$.next(transformedData);
    });
    return this.data$;
}