如何在 Angular 6 中再次触发 HttpGet 请求？答案

【问题标题】：How to trigger again HttpGet request in Angular 6?如何在 Angular 6 中再次触发 HttpGet 请求？
【发布时间】：2018-06-17 14:40:33
【问题描述】：

我正在使用combineLatest 将来自websocket 和database 的数据合并到一个对象中。每次websocket 发送数据时，我的数据都会刷新。尽管我也想通过按下按钮手动刷新页面上的数据。不幸的是，combineLatest 没有检测到我发出了HttpGet 请求以获取最新数据。

export class ShowTestDataComponent implements OnInit {
  stockData: RootObject;

  private stocksData$: WebSocketSubject<MessageEvent>;
  private stocksResources$: Observable<DbObject[]>;

  constructor(private stockService: StockService, private webSocketService: WebSocketServiceService) {
    this.stocksData$ = this.webSocketService.connect();
    this.stocksResources$ = this.stockService.getStocksResources();
  }

  buyStock(code, quantityToBuy): void {
    const dto: DbObject = {
      code: code,
      quantity: quantityToBuy
    };

    this.stockService.buyStock(dto).pipe(
      mergeMap(() => this.stockService.getStocksResources())
    ).subscribe((res) => this.stocksResources$ = of(res));    
  }

  prepareStockData(): void {
    combineLatest(
      this.stocksData$,
      this.stocksResources$,
      (stockData: RootObject, stockResources: DbObject[]) => ({
        stockData,
        stockResources
      })
    ).subscribe((pair) => {
      this.stockData = JSON.parse(pair.stockData.data);

      this.stockData.Items.forEach(item => {
        item.Quantity = pair.stockResources.find(d => d.code === item.Code).quantity;
      });
    });
  }

  ngOnInit() {
    this.prepareStockData();
  }
}

如您所见，如果我在 UI 上按 BUY，则将执行方法 buyStock，并执行 this.stockService.buyStock(dto) 以更改 DB 中的数据，然后执行 this.stockService.getStocksResources() 以刷新 DB 中的数据。一切正常，数据已更改但数据未刷新（comibneLatest 未检测到来自stocksResources$ 的任何消息

这是我的服务，不过我认为问题出在组件上。

export class StockService {
  apiUrl = "http://localhost:5001/api/values";
  constructor(private http: HttpClient) { }

  getStocksResources(): Observable<DbObject[]> {
    return this.http.get<DbObject[]>(this.apiUrl + "/stocks");
  }

  buyStock(data: DbObject){
    return this.http.post<DbObject>(this.apiUrl + "/quantity", data);
  }
}

【问题讨论】：

嗨，你确定this.stockRessources$' produce a new value? and what about : this.stocksResources$ = this.stockService.buyStock(dto).pipe(mergeMap(() => this.stockService.getStocksResources()));`
@GeoAstronaute 使用我的代码，它在后端打断点（Post 更改数据，Get 获取新数据）。用你的代码不是。

标签： angular rxjs angular6 rxjs6 combinelatest

【解决方案1】：

您必须创建新的主题。所以声明：

private stocksResources$: Subject<DbObject[]> = new Subject();

在构造函数中，您必须使用您的Subject 发出您收到的stockResources 数据：

constructor(private stockService: StockService) {
  this.stockService.getStocksResources().subscribe(res => {
    this.stocksResources$.next(res);
  });
}

而且每次您购买新股票时，您都必须再次发布您的数据。

this.stockService.buyStock(dto).pipe(
  mergeMap(() => this.stockService.getStocksResources())
).subscribe((res) => {
  this.stocksResources$.next(res);
});

就是这样:)

完整代码：

export class ShowTestDataComponent implements OnInit {
  stockData: RootObject;

  private stocksData$: WebSocketSubject<MessageEvent>;
  private stocksResources$: Subject<DbObject[]> = new Subject();

  constructor(private stockService: StockService, private webSocketService: WebSocketServiceService) {
    this.stocksData$ = this.webSocketService.connect();
    this.stockService.getStocksResources().subscribe(res => {
      this.stocksResources$.next(res);
    });
  }

  buyStock(code, quantityToBuy): void {
    const dto: DbObject = {
      code: code,
      quantity: quantityToBuy
    };

    this.stockService.buyStock(dto).pipe(
      mergeMap(() => this.stockService.getStocksResources())
    ).subscribe((res) => {
      this.stocksResources$.next(res);
    });
  }

  prepareStockData(): void {
    combineLatest(
      this.stocksData$,
      this.stocksResources$,
      (stockData: RootObject, stockResources: DbObject[]) => ({
        stockData,
        stockResources
      })
    ).subscribe((pair) => {
      this.stockData = JSON.parse(pair.stockData.data);

      this.stockData.Items.forEach(item => {
        item.Quantity = pair.stockResources.find(d => d.code === item.Code).quantity;
      });
    });
  }

  ngOnInit() {
    this.prepareStockData();
  }
}

【讨论】：