Incluí dentro del menú sidebar
un select
que permite cambiar la propiedad, esto corresponde a un componente.
Por otra parte tengo otro componente que muestra los datos de esta propiedad, tengo una variable global que guarda estos datos.
El problema es que una vez que ya estoy en la vista de los datos si cambio la propiedad seleccionada los datos de la propiedad no se actualizan, he intentado gatillar la actualización desde el servicio pero no he tenido éxito.
Probablemente existe una forma correcta de generar esto y espero que alguien me la pueda explicar.
//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());
}
PropiedadClienteComponent
y esto provoque la carga. En el enlace que te he puesto tienes una idea general de cómo hacerlo.