angular2も参照変数の更新を避ける

Question

なぜangular2は変数のすべての参照を更新していますか？

問題文： 私はgetDataメソッドから返されると、いくつかのフィルタリングを行って、観察に加入することだし、それが

正常に動作しているgetDataメソッドコンポーネントで

@Injectable() 
export class BuildingService { 

constructor(private http: Http){  
    } 

buildings$: Observable<Building[]>; 

getData() : Observable<Building[]>{ 
    if (this.buildings$) { 
     this.buildings$ = this.http.get('http://localhost:8080/buildings') 
     .map(this.extractData) 
     .publishReplay(1) 
     .refCount();  
    } 
    return this.buildings$; 
    } 

private extractData(res: Response) { 
    let body = res.json(); 
    return body; 
} 
} 

呼び出しに観測可能返すサービスを持っています

export class Component1 implements onInit{ 

    constructor(private _buildingService: BuildingService) {} 

    buildings: Building[] = []; 

    ngOnInit() { 
     this._buildingService.getData() 
     .subscribe(buildings => { 
      this.buildings = buildings; 
      this.buildings.forEach((building, index){ 
       if (building.id === 0) { 
        this.buildings.splice(index, 1); 
       } 
      }); 
     });  
    } 

getUnfilteredData() { 
    this._buildingService.getData() 
     .subscribe(buildings => { 
      this.buildings = buildings;   
     }); 
    } 
} 

でも、getUnfilteredData（）を呼び出しても、以前にフィルタリングされたデータが取得されています。誰かがなぜこの動作があり、これを回避する方法を説明できますか？

Answer 1

.publishReplay(1).refCount();を使用して、動作している複数のサブスクライバのデータをキャッシュしています。しかし、ngOninitでは元のデータ参照をthis.buildingsにしてスプライスしています。したがって、キャッシュされたデータも影響を受けます。

解決策は、フィルタリングする前にアレイをスライスしてthis.buildingsにスライス（コピーを作成）することです。

ngOnInit() { 
     this._buildingService.getData() 
     .subscribe(buildings => { 
      this.buildings = buildings.slice();//slice instead of taking reference 
      this.buildings.forEach((building, index){ 
       if (building.id === 0) { 
        this.buildings.splice(index, 1); 
       } 
      }); 
     });  
    } 

それとも、これを行うことができます：

ngOnInit() { 
      this.buildings = []; 
      this._buildingService.getData() 
      .subscribe(buildings => { 

       buildings.forEach((building){ 
        if (building.id !== 0) { 
         this.buildings.push(building); 
        } 
       }); 
      });  
     }