Angular 4-通过RXJS Observable使用Object.assign

Question

我是Observables的新手，但仍在努力了解它们的工作原理。

我试图从可观察对象中获取一个数组并允许对其进行更改，但又不影响可观察对象。 我以为我可以用Object.assign（）做到这一点

流程为：

1. 从API获取一系列发票。
2. 将其存储为服务中可观察到的BehaviorSubject。
3. 用户导航到“查看所有发票”屏幕。
4. 用户点击“编辑”一张发票
5. 编辑组件加载，订阅Observable，从数组中找到正确的发票，并将其分配给单独的this.invoice对象。
6. 用户应该能够编辑此this.invoice而不会影响可观察到的

但不是。 6不起作用。 如果用户单击“编辑发票”，对发票进行了更改，但未将其保存到数据库，而是返回到“查看发票”屏幕并再次单击“编辑”，更改仍然存在。 我希望显示原始发票，而不是新编辑的发票。

在user.service中：

export class UserService {
  ...
  public invoices: BehaviorSubject<any> = new BehaviorSubject(null);
  ...
  constructor(){
  };
}

获取发票数组：

userLogin() {
  this.commonService.request('login', '', {password: this.password, email: this.email})
    .then((response:any) => {
      ...
      if(response.invoiceData) this.userService.invoices.next(response.invoiceData);
      ...
      }
    })
}

查看发票组件：

ngOnInit() {
  this.invoicesSubscription = this.userService.invoices.subscribe((invoices) => {
    if(invoices) {
      this.invoices = invoices;
    }

  });
}

编辑发票组件：

ngOnInit() {
  this.paramsSubscription = this.activatedRoute.params.subscribe((params: Params) => {
    if(params) {
      this.invoicesSubscription = this.userService.invoices.subscribe((invoices) => {
        if(invoices) {
          invoices.forEach((invoice) => {
            if(invoice._id == params.invoiceId) {
              this.invoice = Object.assign({}, invoice); 
              console.log(invoice) // This shows changes to the invoice when the screen loads for the second time.
            }
          });
        }
      });
    }
  });
}

如何在不影响Observable的情况下编辑this.invoice对象？

Answer 1

我通过使用JSON.parse(JSON.stringify(invoice))而不是Object.assign({},invoice)解决了这个问题。 在编辑发票组件中。

Answer 2

Observables只允许您将数据视为流，您可以在其中通过使用运算符对其进行出色的处理。 但是他们不会以任何方式“存储”数据-他们只会看到供观察者使用的元素列表，而数据转换部分则留给使用者。

Object.assign({}, obj)不会对对象进行深度复制。 就您而言，在此级别上进行更改。 this.invoice不应返回到BehaviorSubject中的原始对象（例如this.invoice.foo = 'bar' ），但是如果仅深入一层，它会（例如this.invoice.items.push('bar') ）

您将需要制作对象的完整副本（四处搜索，有很多方法可以做到）。 您还可以使用Immutable.js来帮助您，但是使用它们会有些Immutable.js ...（这是一个可存储不可变数据的库：如果您想更改数据的某些部分，它将为您提供该对象的全新副本，其中包含您需要的更改，而原样保持不变）