如何在 POST 后刷新 angular2 中的 observable

Question

我有一個顯示信息的表，單擊表行后，用戶可以在完成請求后更新值，該表未使用新值更新，我必須按 F5 刷新視圖。

如何在完成請求后強制執行新的 get 請求

這是相關的代碼

我的服務

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

}

我的組件

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

}

我有另一個組件 MACService，它在發送 POST 請求時會發出一個事件，該事件被捕獲為 dataChangedEvent

Answer 1

您可以使用兩種方法。

一種是在 POST 訂閱事件中調用 GET 請求。

this.guardianService.editGuardian(this.guardData).subscribe(res=> {
  this.loadData();  // this is function who makes GET request
});

另一種方法是使用 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) .....

這是服務。 這里是組件

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