Question

这是我的服务：

import { Injectable } from '@angular/core';
import { Headers, Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Rx';

import 'rxjs/observable/of';
import 'rxjs/add/operator/share';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class CaseService {

    private data:any;
    private observable: Observable<any>;

    constructor(private _http: Http) {}

    public GetCase() {

         const url = 'http://localhost:55130/api/case?caseId=123';

         if (this.data) {
             //after filtering an array of objects on a local variable
             //in a controller, this.data is now modified
             console.log(this.data);
             return Observable.of(this.data);
         } else if (this.observable) {
            return this.observable;
         } else {
             let headers = new Headers();
            headers.append('Content-Type', 'application/json');
             this.observable = this._http.get(url,{headers:headers})
                 .map(response => {
                    this.observable = null;
                    this.data = response.json();
                    return this.data;
                 }).share();
                 return this.observable;
        }

    }
}

在我的家庭组件中，在ngOnInit中，我正在执行以下操作：

  ngOnInit() {
    this._caseService.GetCase().subscribe(data => {
      this.case = data;

      //filter this.case.CaseContent array
      //When I do this, it does return the correct object from the array
      //but it also modifies the data variable on the shared service
      //which is what I don't want
      this.case.caseContent = this.case.CaseContent.filter(function(item){
          return item.Route == '/home';
      })[0];

    });
  }

为什么当我在家庭控制器中修改局部变量时，它会修改共享服务中的变量。基本上我要做的是当我进入主页时，我过滤掉主页的内容，然后当我访问联系页面时，我再次获得完整的对象，从缓存和文件管理器输出内容联系页面，但是当我转到联系页面时，CaseContent现在是一个对象，而不是一个对象数组。

Answer 1

您正在使用相同的数据实例＆＃39;变量。从方法返回引用类型并不克隆/复制该对象，它只是创建新指针（指向内存中的同一对象）。

您可以通过删除内部缓存来解决它：

this.data = response.text();
return JSON.parse(this.data);

或者，如果你真的想要缓存observable和数据，那么你应该在返回时克隆该对象，例如＆return;返回Observable.of（DeepClone（this.data））;＆＃39;

在Google中搜索如何在js中深层克隆对象，或实现自定义方法。

在你的情况下，最好只缓存字符串json响应并调用＆＃39; JSON.parse（）＆＃39;在每次访问。

{{1}}

修改组件中的局部变量会修改Angular 2中的共享服务变量吗？

1 个答案: