Angular6中如何再次触发HttpGet请求？

Question

我正在使用 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) 来更改数据库中的数据, 然后 this.stockService.getStocksResources() 从数据库刷新数据。一切正常，数据已更改但数据未刷新（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);
  }
}

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

Angular6中如何再次触发HttpGet请求？

How to trigger again HttpGet request in Angular 6?

rxjs

angular

combinelatest

angular6

rxjs6