angular2避免更新參考變量

Question

爲什麼angular2更新變量的所有引用？

問題陳述： 我有上調用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; 
} 
} 

在組件我訂閱觀察到從GetData方法返回，並做一些過濾返回觀察到的一個服務，它是工作的罰款

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); 
        } 
       }); 
      });  
     }