15

Update, in short:

I am looking for the equivalent of doing something like this but for an Observable rather than a regular array:

var i = this.customers.findIndex(customer => customer._id === id);
~i && this.customers[i] = newObject.

I have 2 components on the screen. A list component on the left and a display component on the right (imagine it to be a PDF that is just rendering the latest 'version' of data)

When you click an item in the list, it displays the data for that selected item in the component on the right.

The list is an observable array:

items$: Observable<Proposal[]>;

Each item in the list has a child component. It is possible to click an icon on a single item, which changes the data of that child. The child has an event emitter to tell the parent the data has changed:

@Output() proposalDataChanged: EventEmitter<string> = new EventEmitter();

The parent binds to it:

 <fb-proposal-list-item
  [proposal]="proposal" (proposalDataChanged)="handleDataChanged(p)">
 </fb-proposal-list-item>

The problem I have is that in the handleDataChanged method I want to search the Observable for the item that has changed and replace it with the new payload returned from the emitter. I do not want to call the server to refresh the entire list.

I need to do this so that the component on the right reflects the new data.

I am able to find the item like this:

handleDataChanged(data: Proposal){
  this.items$.subscribe((items: Proposal[]) => item = items.find(p => p.id 
  == data.id));
}

but cannot figure out how to update the item in the Observable, rather than just finding the one that changed.

I know I can 'trick' the component by navigating elsewhere and then back again to force it to refresh, but that also hits the API (and reloads the page as well).

The url looks like this:

/pages/proposals/manage/-XHzOJY/document

That slug in the url is the id of the currently selected item (which is rendered in the component on the right).

So I cannot use params change detection here, because it doesn't change. The user is causing a change to the already selected object, which is one of many inside the observable array.

UPDATE

Here is the full code for the parent component:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Observable, Subject } from 'rxjs/Rx';

import { Proposal } from '../proposal';
import { ProposalService } from '../proposal.service';
import { SearchService } from '../../services/search-service';

@Component({
  selector: 'fb-proposal-list',
  templateUrl: './proposal-list.component.html',
  styleUrls: ['./proposal-list.component.css']
})
export class ProposalListComponent implements OnInit {
  total$: Observable<number>;
  items$: Observable<Proposal[]>;

  term: string = "";
  currentPage: number = 1;
  private pageStream = new Subject<number>();  

  constructor(
    private _searchService: SearchService,
    private _proposalService: ProposalService,
    private _router: Router) {
  }

  ngOnInit() {
    this.setupSearching();
    // let timer = Observable.timer(0, 60000);
    // timer.subscribe(() => this.goToPage(this.currentPage));
  }

  setupSearching(){
    const searchSource = this._searchService.searchTermStream
      .map(searchTerm => {
        this.term = searchTerm;
        return {search: searchTerm, page: 1}
      });

    const pageSource = this.pageStream.map(pageNumber => {
      this.currentPage = pageNumber;
      return {search: this.term, page: pageNumber}
    });

    const source = pageSource
      .merge(searchSource)
      .startWith({search: this.term, page: this.currentPage})
      .switchMap((params: {search: string, page: number}) => {
        return this._proposalService.getProposalsPaged(params.search, params.page)
      })
      .share();

    this.total$ = source.pluck('meta').pluck('total_items');
    this.items$ = source.pluck('items'); 
  }

  goToPage(page: number) {
    this.pageStream.next(page)
  }  

  handleDataChanged(id: string){
    this.goToPage(this.currentPage);  
  }
}
0

2 Answers 2

27

I don't think you fully understand how Observables work. What you call here "observable collection" is not what you might think it is, as in "collection of observable elements".

What it is, actually, is a stream of emitted collections. So when you have Observable<Model[]>, it's not a collection that's being observed by some observer, it's actually a stream of emitted Model[] collections. In that sense, you can't update the emitted value (obviously, as it already has been emitted), but what you want is it for observable to emit another, updated collection of Model.

Before you try that, you'll have to know that you can't emit something from observable that you haven't created yourself. What you need is a Subject, an object that is both Observable and Observer (it inherits from both Observer and Observable interfaces).

So, let's construct something like that:

subject: Subject<Proposal[]> = new Subject();
_proposals: Proposal[] = [];

get proposals() {
  return this.subject.asObservable();
}

Let's say you get your proposals from some API call:

this.http.get("...").map(response => response.json().subscribe(data => {
  this._proposals= <Proposal[]>data; // save your data
  this.subject.next(this._proposals); // emit your data
});

And now, you want to update your data:

updateProposals() {
  this._proposals = this._proposals.filter(...); // or whatever
  this.subject.next(Object.assign({}, this._proposals)); // emit completely new value
}

This may seem like a lot and I would recommend reading more on how Observables work for the sake of future issues that you might have. Cheers.

4
  • You're right, coming from the Silverlight/WPF world, observables are to me something else entirely. Thanks for the detailed explanation.
    – rmcsharry
    Commented Mar 15, 2017 at 0:01
  • The problem is that I already have a Subject, because the list is paged. I will add the full code for the parent component.
    – rmcsharry
    Commented Mar 15, 2017 at 0:06
  • Well, you can just convert the _items$ to Subject, add a new this._items collection and add a getter items$ like in my example. When you want to update the items, just do what I've shown you in the last method in my answer.
    – Adnan A.
    Commented Mar 15, 2017 at 0:16
  • Thanks, I understand now. :)
    – rmcsharry
    Commented Mar 15, 2017 at 0:18
-3

You can do it in below ways

  • use | async pipe
  • create a private variable and in your subscribe block add value to that which will reflect there.
2
  • 2
    Thanks for the help, but I need to see code to be able to understand how to solve this. Sorry I understand code better than English. The other answer helped solve it now anyway. But thanks again.
    – rmcsharry
    Commented Mar 15, 2017 at 0:19
  • @Aniruddha Das, if you want it to be an answer, please provide more information, otherwise, post it as a comment. Commented Dec 18, 2020 at 20:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.