angular2也避免更新参考变量 [英] angular2 avoid updating reference variable also

问题描述

为什么angular2正在更新变量的所有引用?

why angular2 is updating all the references of a variable?

问题陈述: 我有一个在调用getData方法时返回可观察到的服务

Problem Statement: I have a service which returns observable on calling getData method

@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方法返回的observable并进行了一些过滤，效果很好

in component I'm subscribing to observable returned from getData method and doing some filtering and it is working fine

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()，我仍会得到以前过滤的数据.有人可以解释为什么这种行为以及如何避免这种情况吗?

but even when I call getUnfilteredData() also, I am getting previously filtered data. Can somebody please explain why is this behaviour and how to avoid this?

推荐答案

您正在使用.publishReplay(1).refCount();来缓存正在运行的多个订户的数据.但是在您的ngOninit中，您会将原始数据引用放入this.buildings中并进行拼接.因此，您缓存的数据也会受到影响.

You are using .publishReplay(1).refCount(); to cache the data for multiple subscribers which is working. But in your ngOninit you are taking the original data reference into this.buildings and splicing it. So your cached data is also affected.

解决方案是在过滤之前将数组切片(复制)成this.buildings.

Solution is to slice(make a copy) the array into this.buildings before filtering.

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

这篇关于angular2也避免更新参考变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！