Shil Nevado Shil Nevado - 1 month ago 16
TypeScript Question

How to update object data of "Observable.of(object)"

UPDATED QUESTION:

Well, debuging I noticed that the value is updating only here:

this._homeService.getClientInfo(this.user.customer_uuid).subscribe(
(res) => {this._customerService.setCustomer(this.getCustomerFromResponse(res)).subscribe()},
(err) => {console.error(err)}
);


The function getCustomerFromResponse(response) return a customer object, I could also do a new customer right there or whatever I want that the value is passed. But calling the function setCustomer(customer) in the examples of my old post (behind) the customer isn't being passed to the value of the observable. Why?

OLD POST:
I'm working with observables but I don't unsertand them at all. I'm facing NOW this problem, but I have constantly problems. I have this service:

import {Injectable} from "@angular/core";
import {Customer} from "./customer";
import {Observable} from "rxjs/Rx";
import "rxjs/add/operator/map";
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/do';

@Injectable()
export class CustomerService {
private customer: Customer;
private customer$: Observable<Customer>;

constructor() {
this.customer = new Customer;
this.customer$ = Observable.of(this.customer);
}
setCustomer(customer: Customer) {
return this.customer$.do(val => this.customer = val);
}

getCustomer() {
return this.customer;
}

getObservable() {
return this.customer$;
}

}


I call getObservable() from a the class app.component in order to update the value eachtime:

this._customerService.getObservable().subscribe(
res => {this.customer = res})


I post now each class:

clients.component

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Response } from "@angular/http";
import { User } from '../../model/user';
import { Customer } from '../../model/customer';
import { UserService } from "../../model/user.service";
import { CustomerService } from "../../model/customer.service";
import { ClientsService } from './clients.service';
import { HttpWrapperService } from "../../shared/httpwrapper.service";
import { NotificationsService } from '../../shared/notifications.service';
import { Notification } from '../../shared/notifications.model';


The method:

customerSelect(customer: Customer) {
let user = this._userService.getUser();
user.customer_uuid = customer.uuid;
this._customerService.setCustomer(customer).subscribe();
this._userService.setUser(user).subscribe();
this.router.navigate(['/home']);
}


login.component

import {Component, Input, OnInit} from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';
import { User } from '../../model/user';
import {UserService} from "../../model/user.service";
import { Customer } from '../../model/customer';
import {CustomerService} from "../../model/customer.service";
import {LoginService} from "./login.Service";
import {HttpWrapperService} from "../../shared/httpwrapper.service";
import {AuthService} from "../../shared/auth.service";
import { NotificationsService } from '../../shared/notifications.service';
import { Notification } from '../../shared/notifications.model';


the method:

ngOnInit() {
this.sub = this.route.params.subscribe(params => {
if (params['flag'] == 0) {
let nullcustomer = new Customer();
nullcustomer.name = "";
this._customerService.setCustomer(nullcustomer).subscribe();
this._authService.logout();
}
});
}
ngOnDestroy() {
this.sub.unsubscribe();
}


FYI I'm using angular core 2.0.0 stable release. As I'm always facing problems with observables I would be grate if someone could provide me a good link tutorial just for obserbables for angular2. I search a lot but I can't find a good enought one.

Answer

I found the solution but I can't understand it well, if someone could explain me why it works would be better.

First, I have to get the current customer and I can't create a new Customer and clear all the properties. So in both places (home and clients) the function would be:

formatCustomer(customerNew: Customer) {
        let customer = this._customerService.getCustomer();
        if (customer == null) {
            customer = new Customer;
        }

        customer.prop1= customerNew.prop1;
        customer.prop2= customerNew.prop2;
        ...
        this._customerService.setCustomer(customer).subscribe();
}