角2/4可觀察對象不需要雙向綁定

Question

（我正在重構我的問題，因為我認為第一個問題非常令人困惑……）

我正在努力弄清Observables在Angular 2/4中的工作方式。具體地說，我想在組件初始化時訂閱服務的Observable，然后在組件的生命周期中修改數據而不影響Observable。或其他訂閱者。 我將數據存儲在組件上的變量中，但是當我對其進行修改時，Observable的其他訂閱者也會顯示更改。

在我的代碼中，有三個可觀察對象：客戶端，項目和用戶。 現在，我只是想修改Observable項目中的數據。 我將數據用作ng2-ui自動完成功能的來源，因此無法按照下面的注釋中的建議使用* ngFor。

common.service.ts（創建可觀察對象）

import { Observable } from 'rxjs'
import { BehaviorSubject } from 'rxjs';

export class UserService {
  public clients: BehaviorSubject<any> = new BehaviorSubject(null);
  public projects: BehaviorSubject<any> = new BehaviorSubject(null);
  public user: BehaviorSubject<any> = new BehaviorSubject(null);

  constructor(){};

}

login.ts（訂閱Observable，從API獲取數據，然后將其傳遞給Observable）

ngOnInit() {
  this.userService.clients.subscribe();
  this.userService.projects.subscribe();
}

userLogin() {
  this.commonService.request('login', 'post', '', {password: this.password, email: this.email})
    .then((response:any) => {
      if(response.token) {
        this.configService.token = response.token;
        if(response.clients) this.userService.clients.next(response.clients);
        if(response.projects) this.userService.projects.next(response.projects);
        this.configService.loggedIn = true;
        this.router.navigate(['dashboard']);
      }
    })
}

component.ts（訂閱，從Observable獲取數據，然后對其進行修改。）

ngOnInit() {
  this.userService.clients.subscribe((clients) => {
    this.clients = clients;
  });
  this.userService.projects.subscribe((projects) => {
    this.projects = projects;
  });
  this.filteredProjects = this.projects;
  this.filteredClients = this.clients;
}

filterProjects(client) { // When a client is selected
  this.filteredProjects.forEach((project) => {
    if(client.projects.indexOf(project._id) == -1) {
      filteredProjects.splice(project._id, 1) // this splices the filteredProjects array, but also this.projects and any other subscriptions to the observable in the app.
    }
  });
}

當我過濾this.filteredProjects時，this.projects也被修改。 我可以通過兩個對象的console.logs看到它，也因為另一個組件正在訂閱可觀察的項目，而另一個組件也顯示了更改。

但是，如果我不過濾this.filteredProjects，而是說this.filteredProjects = []; 那么this.projects保持不變。

如何在不影響觀察對象或其其他訂戶的情況下修改可觀察對象的數據？

Answer 1

我不能完全確定您通過查看代碼要完成的工作，但是可能會給您一個更好的指導，以實現您的工作。

根據我的理解，您想要一個可觀測的常規項目來保存您的項目。 我認為您已經可以使用該代碼了（盡管您沒有在代碼中列出該代碼）。 現在，在您的組件中，您想首先獲得對其的訂閱。 有幾種使用訂閱的方法，我看到您嘗試做的是訂閱它，這種方法的問題在於它將花費您很多工作。 首先，您將需要處理projects數組的副本 ，因為現在您說您在所有代碼中都更改了項目，因為您在各處都使用了對同一個project數組的引用（獲取副本的方法有多種方式，其中一個想到的就是例如使用concat和一個空數組）。

完成此操作后，您還需要知道用戶選擇了哪個客戶端，因此，無論何時再次發出訂閱（我想從您的話說起，項目列表都可以在此組件之外更改），您將必須獲得一個再次復制新副本，然后再次過濾。 這可能有效，並且最接近您的描述。

我認為您還應該尋找一種更好的方法，例如將ngFor與html中的異步管道一起使用來迭代訂閱中的項目（ 異步管道，可以與ngfor一起使用 。您可以做的下一件事是使用html中的自定義過濾器，以按選定的客戶端過濾結果。