Question

不确定我是否正确地提出了问题，但我有一个用于在不同组件之间共享数组对象的服务。但是，当我将新对象提交给服务时，有些东西正在更新服务数组中的所有其他对象。

即先推 answers = [{questionId：1，value：1}] 第二次推送{questionId：1，value：3} answers = [{questionId：1，value：3}，{questionId：1，value：3}]

注意如何更改值以匹配新推送的答案对象的值。

这是我的服务

export interface Answer {
  questionId: number;
  value: number;
}

  private answers: Answer[] = [];
  private _answers: BehaviorSubject<Answer[]> = new BehaviorSubject([]);
  public answers$ = this._answers.asObservable();


  addAnswer(answer: Answer) {
    this.answers.push(answer);
    this._answers.next(this.answers);
  }

这是我的组件

export class LevelComponent {
  subscription: Subscription;
  answer: Answer = {questionId: 0, value: 0}; 
  a: Answer[];
  constructor(public route: ActivatedRoute, public answerService: AnswerService) {

  }

  ngOnInit() {

    this.subscription = this.answerService.answers$.subscribe(item => this.a = item);


  }
  ngOnDestroy() {
    // prevent memory leak when component is destroyed
    this.subscription.unsubscribe();
  }


  submitAnswer(e){
    console.log(e.target.id);
    this.answer.questionId = 1;
    this.answer.value = e.target.id;

    this.answerService.addAnswer(this.answer);
  }

基本上我希望在多个组件之间“共享”一系列答案，但对于行为主题和订阅的理解有限，为什么在将新项目添加到服务中的数组之后会更新所有其他组件对象。另外，如果我将答案var更改为只是一个数字，那么当我提交答案时，数组中的值不会改变。

这是Plunker，说明了我所看到的内容。

Answer 1

可能是因为你这样做：

this.answers.push(answer);
this._answers.next(this.answers);

当你只需要这样做时

this._answers.next(answer);

I.E通过使用整个数组调用next，您的订阅者将接收整个数组作为下一个项目，而不仅仅是下一个项目。

Answer 2

感谢那些关注我的问题。

事实证明我的服务是正确的并且按预期运行。问题是我每次都将我的答案的相同引用传递给addAnswer调用，因此它更新了引用的答案，而后者又更新了数组中的每个对象。

修复是每次提交前都要声明一个新答案。

  submitAnswer(e){
    let answer: Answer = {questionId: 1, value: e.target.id};
    this.answerService.addAnswer(answer);
  }

Angular2 Observable更新私有变量

2 个答案: