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