Tengo una tabla que muestra información, al hacer clic en una fila de la tabla, el usuario puede actualizar los valores una vez que completa la solicitud, la tabla no se actualiza con los nuevos valores y debo hacer un F5 para actualizar la vista.
¿Cómo fuerzo una nueva solicitud de obtención al completar la solicitud?
aquí está el código relevante
MI SERVICIO
import { Injectable } from '@angular/core'; import { Http, Response } from '@angular/http'; import {Observable} from 'rxjs/Rx'; import { BehaviorSubject } from 'rxjs/BehaviorSubject'; // Import RxJs required methods import 'rxjs/add/operator/map'; import 'rxjs/add/operator/catch'; import { Device } from '../model/Device'; @Injectable() export class DeviceService { devices$: BehaviorSubject<Device[]>; constructor(private http : Http) { this.initializeDevices(); } initializeDevices() { var url = "./api/read/network/device"; //var url = '../assets/data/devices.json'; if (!this.devices$) { this.devices$ = <BehaviorSubject<Device[]>> new BehaviorSubject(new Array<Device>()); this.http.get(url) .map((res:Response) => res.json()) .subscribe(devices => { this.devices$.next(devices); }); } } subscribeToDevices(): Observable<Device[]> { return this.devices$.asObservable(); } }mi componente
import { Component, OnInit, ViewChild } from '@angular/core'; import { DeviceService } from '../../services/device.service'; import { MacService } from '../../services/mac.service'; import { Device } from '../../model/Device'; @Component({ selector: 'app-device-table', templateUrl: './device-table.component.html', styleUrls: ['./device-table.component.sass'] }) export class DeviceTableComponent implements OnInit { devices; //reference to the datatable needed to count filtered rows @ViewChild ('dt') dt; constructor(private deviceService : DeviceService, private macService : MacService) { } ngOnInit() { this.registerEvents(); this.getDevices(); } getDevices(){ this.deviceService.subscribeToDevices().subscribe( devices => this.processDevices(devices), error => console.log(error) ); } processDevices(devices){ //just data manipulation } emitShowDialogEvent(device) { if(!device.macAddress) { return; } this.macService.broadcastShowDialogEvent(device.macAddress); } registerEvents(){ this.macService.dataChangedEvent.subscribe(event =>{ console.log('data changed event'); this.getDevices(); //not provoking a new GET request to the API :( }); } }Tengo otro componente, MACService, que al enviar una solicitud POST emite un evento que se captura como dataChangedEvent
Dos formas que puedes usar.
Una es llamar a la solicitud GET dentro del evento de suscripción POST.
this.guardianService.editGuardian(this.guardData).subscribe(res=> { this.loadData(); // this is function who makes GET request });La otra forma es usar ReplaySubject.
private subject: Subject<any> = new ReplaySubject<any>(1); get $getSubject(): Observable<any> { return this.subject.asObservable(); } loadData() { this._http.get(url, header) .map(x=>x.json()) .subscribe(data=> { this.subject.next(data); }); } postData(data) .....Este es el Servicio. Aquí va componente
this.serviceHandle.$getSubject.subscribe(res => { //here goes any thing you want to do. }); this.serviceHandle.loadData(); // this function will make reqeust this._accountService.editAccountData(account).subscribe(res=> { this.serviceHandle.loadData(); });