I included in the menu sidebar a select that allows to change the property, this corresponds to a component.
On the other hand I have another component that shows the data of this property, I have a global variable that stores this data.
The problem is that once I'm in the data view if I change the selected property the property data is not updated, I tried to trigger the update from the service but I have not been successful.
There is probably a correct way to generate this and I hope someone can explain it to me.
//SERVICIO
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs/Observable';
import { GLOBAL } from './global';
import { Propiedad } from '../models/propiedad';
import { Plan } from '../models/plan';
import { Router } from '@angular/router';
import { Subject } from 'rxjs/Subject';
@Injectable()
export class PropiedadService {
// pruebas
private propiedadPrueba = new Subject<void>();
public propiedadCambio$ = this.propiedadPrueba.asObservable();
constructor(
private _http: Http,
private router: Router
) {
this.url = GLOBAL.url;
}
getPropiedad(){
return GLOBAL.propiedad;
}
setPropiedad(token, id: String) {
this.buscarPropiedad(token, id).subscribe(
response => {
if (!response) {
console.log('error al recuperar propiedad');
} else {
GLOBAL.propiedad = response;
this.propiedadPrueba.next();
this.router.navigate(['/karulover/propiedad']);
}
},
error => {
console.log(error);
}
)
}
// componente Vista
import { Component, OnInit } from '@angular/core';
import { PropiedadService } from '../../services/propiedad.service';
import { LoginService } from '../../services/login.service';
import { Propiedad } from 'app/models/propiedad';
@Component({
selector: 'app-propiedad-cliente',
templateUrl: './propiedad-cliente.component.html',
styleUrls: ['./propiedad-cliente.component.scss'],
providers: [LoginService, PropiedadService]
})
export class PropiedadClienteComponent implements OnInit {
token: any;
identidad: any;
propiedad: any;
constructor(
private _propiedadService: PropiedadService,
private _loginService: LoginService
) { }
ngOnInit() {
this.token = this._loginService.getToken();
this.identidad = this._loginService.getIdentidad();
this.actualizarPropiedad();
console.log(this.propiedad);
this._propiedadService.propiedadCambio$.subscribe(() => {
this.actualizarPropiedad();
})
}
actualizarPropiedad() {
this.propiedad = this._propiedadService.getPropiedad();
}
}
// Componente sidebar
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { LoginService } from '../../services/login.service';
import { PropiedadService } from '../../services/propiedad.service';
import {MatOption} from '@angular/material';
declare const $: any;
declare interface RouteInfo {
path: string;
title: string;
icon: string;
class: string;
rol: string;
}
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.css'],
providers: [LoginService, PropiedadService]
})
export class SidebarComponent implements OnInit {
menuItems: any[] = new Array();
menuItems_temp: any[];
roles: any[];
identidad: any;
token: any;
propiedades: any;
constructor(private router: Router, private _loginService: LoginService, private _propiedadService: PropiedadService ) {
this.identidad = this._loginService.getIdentidad();
}
ngOnInit() {
this.menu();
this.identidad = this._loginService.getIdentidad();
this.token = this._loginService.getToken();
this.propiedadesUsuario();
}
cambioPropiedad(valor){
// console.log(valor);
this._propiedadService.setPropiedad(this.token, valor);
// console.log(this._propiedadService.getPropiedad());
}