Angular 多个 HTTP post 到同一个 API 具有不同的请求正文发送相同的请求

Question

我有几个居民护理计划图，我为每个图使用相同的组件，调用相同的 API，但输入数据不同。我在 parent 组件中有一个日期选择器，当这个日期更新时，我想更新所有图表。每个图形组件都应调用具有相同日期和不同 ID 的 API，但调用都是平等的。

我有一个 parent 组件，在 *ngFor:

上有 children 个组件

<div *ngFor="let data of selectedItems">
    <app-care-plan-graph 
        [careData]="data" 
        [dateInput]="dateInput">
    </app-care-plan-graph>
</div>

我从每个 CarePlanGraphComponent 进行 API post 调用：

  @Input() careData: {careAdlId:any};
  @Input() dateInput: GetAdlEventRequest;
  constructor(private residentService: ResidentService) { }
  ngOnInit() {
    this.getAdlEvents(this.dateInput);
  }
  getAdlEvents(body: GetAdlEventRequest) {
    body.careAdlId = this.careData.careAdlId;
    console.log("calling get adl events: ", body);
    this.residentService.getAdlEvents(body).then((response: ApiResponseModel) => {
      // handle response
    })
  }

服务调用是普通的httppost:

  getAdlEvents(body): Observable<any> {
    return this.http.post(this.residentsBaseUrl + 'getAdlEvents', body);
  }

在 parent 组件上，我使用 ViewChildren 访问 carePlanGraph 组件并在视图更新时调用方法 getAdlEvents()

  @ViewChildren(CarePlanGraphComponent) graphComponents: QueryList<any>;
.
.
.
  ngOnInit() {
    this.form.valueChanges.subscribe(data => {
      this.dateInput= {
        startDate: data.startDate,
        endDate: data.endDate
      };
      this.graphComponents.forEach(element => {
        element.getAdlEvents(this.selectedInputs);
      });
    })
  }

在生成 API post 之前，在 console.log 之前一切正常，但是 post 始终使用相同的请求主体生成，无论控制台日志显示它有不同的 ID。我可以在网络选项卡中看到有效负载相同，这里有一些示例图像，在控制台中你可以看到有两个不同的主体，一个 ID 为 60，另一个 ID 为 61，但两者都 API post 是用 ID 为 61 的有效载荷制作的：第一个有效载荷： 1st payload

第二个有效载荷： 2nd payload

任何帮助理解这个问题的帮助将不胜感激，现在我将把 Api post 移动到 parent 组件并使用 concatMap 以便 post 按顺序制作，并将数据传递给 children，但我真的很想了解为什么这种方式不起作用。

Answer 1

发生这种情况的原因是您实际上是在用同一个主体调用请求。

Javascript 中的对象作为对相同对象的引用传递。

由于您将对象作为主体传递给第一个 Graph 中的 API 调用，然后在第二个 Graph 中修改同一对象，因此会产生相同的 api 调用。

您能做的最好的事情就是在每次拨打电话时复制正文请求。这很容易通过扩展运算符 (...) 实现。

  getAdlEvents(body: GetAdlEventRequest) {
    // copy the body and add care id
    body = {...body, careAdlId: this.careData.careAdlId};
    console.log("calling get adl events: ", body);
    this.residentService.getAdlEvents(body).then((response: ApiResponseModel) => {
      // handle response
    })
  }

Angular 多个 HTTP post 到同一个 API 具有不同的请求正文发送相同的请求

Angular multiple HTTP posts to same API with different request body sends the same request

javascript

http

subscribe

rxjs

angular