Angular 7：服务实例无法正常工作

Question

bounty到期在5天内。这个问题的答案有资格获得+ 50声望赏金。Dev Anand正在寻找来自信誉良好的来源的答案：

我已经用谷歌搜索了，但是我找不到解决方案。我真的很想了解为什么服务的行为方式。我知道我缺少了一些东西，但是无法得到

我的应用程序中有两个组件-“过滤器”和“家”。这两个组件是应用程序组件的子组件。

我有一个我要通过服务从过滤器组件传递到家庭组件的以下对象。并且由于我希望每当过滤器组件发生更改时在home组件中更新这些数据，因此我在服务中使用BehaviorSubject。

模型：filter-response.model.ts

export interface FilterResponse{
    filter:string;
    filterlist:string[];
}

filter.component.ts

export class FilterComponent implements OnInit {
    filterMainList:FilterResponse[]=[
        {
            "filter": "abc",
            "filterlist": ["a","b","c"]
        },
        {
            "filter": "def",
            "filterlist":["d","e","f"]
        },
        {
            "filter": "ghi",
            "filterlist": ["g","h","i"]
        }
    ];
    constructor(private filterService:FilterService,) {
        this.filterService.setFilterConditions(this.filterMainList);
    }
    ngOnInit() {
    }
}

在家庭组件中，我收到了数据，我想对其进行一些更改。

home.component.ts

export class HomeComponent implements OnInit {
  constructor(private filterService:FilterService) {
    this.filterService.getFilterConditions().subscribe((data)=>{
      let tc:FilterResponse[]=data
      for(let f in tc){
        tc[f].filterlist=['changes'];//this is where I make the changes
      }
    });
   }
  ngOnInit() {
  }
}

我有一个具有行为主题的过滤器服务。这就是我感到困惑的地方。我将数据记录在服务中的next（）之前，而我实际得到的数据是我在home组件中更改的数据，这意味着我对home组件中的数据实例所做的更改也影响（更改）了服务中的数据。

filter.service.ts

@Injectable({
    providedIn:'root'
})
export class FilterService{
    private filterConditions = new BehaviorSubject<FilterResponse[]>(null);
    constructor(){}
    setFilterConditions(filterList:FilterResponse[]){
        console.log(filterList);//data changes incorrectly
        this.filterConditions.next(filterList);
    }
    getFilterConditions():Observable<FilterResponse[]>{
        return this.filterConditions.asObservable();        
    }
}

我的控制台日志：

实际上应该是我刚刚在过滤器组件中传递的数据。但是它将显示我在家庭组件中修改的数据。

最后是app.component.ts，如果有帮助的话

app.component.ts

<app-filter></app-filter>
<app-home></app-home>

我想提醒您的另一件事是。我试图在stackblitz中重新创建场景。但是问题在于它在这里工作正常。

https://stackblitz.com/edit/angular-ivy-9th5pj

请解释一下我在项目中缺少的内容。还是这是服务将按角度工作的实际方式。

Answer 1

在您的服务文件中进行此更改

 setFilterConditions(filterList:FilterResponse[]){
    this.filterConditions.next(JSON.parse(JSON.stringify(filterList)));
}

这将克隆您的数组。还有很多其他方法可以在JS中克隆对象/数组Different ways to Clone object in JS