首页 > 解决方案 > Angular 请求忽略了 HttpPatch

问题描述

我有一个奇怪的问题。我正在为我的应用程序开发批量编辑功能。每当用户更新字段时,我的表单都会自动保存。一旦触发了自动保存事件,我就会遍历一组相似的用户选择记录,目的是在那里进行相同的更改。

例如,我可能为计划 {id:4} 加载了表单,但还希望将编辑应用于 ID 为 2、3、7、10 的记录。假设我将 projectName 字段更改为“一个伟大的项目”。我想要的结果是更新所有五条记录以将 projectname 字段设置为“A great Project”。

但是,即使我遍历每条记录,我也只点击了一次服务,这就是原始计划(在我的示例 4 中)。其他一切都消失了。我仍然可以看到我状态的变化,并且可以一直跟随它们。

这是我在容器/组件上键入事件后的保存

autoSave(save: {changes: Plan, field: string, value: any}) {

  this.planContext.getEnabled().forEach(x => {
    x.plan[save.field] = save.value;
    console.info(x.plan);
    this.autoSavePlan(x.plan, x.plan.id);
  });
}

autoSavePlan(changes: Plan, id: number) {
   this.store.dispatch(new PlanActions.Edit({ plan: { id: id, changes: changes } }));
}

我有以下效果

  @Effect()
  editPlan$: Observable<Action> = this.actions$
    .ofType<Edit>(PlanActionTypes.Edit).pipe(
      switchMap(action => this.planService.editPlan(action.payload.plan)),   //Last Line of code for server break point for failing records.
      map((plan: any) => {
        console.log(plan);
        return new EditSuccess({ id: plan.id, changes: plan});
      }),
      catchError(err => {
        toastr.error(`An error has occurred. Please reload the page before making any other changes.`); 
        console.error(err);
        return of(new EditFail(err));
      })
    );

服务电话:

editPlan(plan: Update<Plan>) : Observable<Plan> {
    this.log("Editing a Plan");

    return this.http.patch<Plan>(this.odataUrl + "Plans(" + plan.id + ")", plan.changes, this.httpPatchOptions);
  }

计划控制器

[Authorize]
public async Task<IHttpActionResult> Patch([FromODataUri] int key, Delta<Plan> plan)
{
//Breakpoint hit only once
    if (!ModelState.IsValid)
    {
        return BadRequest(ModelState);
    }
 //... do stuff
}

编辑1

用户故事:作为用户,我希望能够一次编辑多个计划。我应该能够使用单个值更新计划字段,并将该更改也应用于我选择进行批量编辑的其他计划记录。

预期结果:我更新了表单中的一个字段。我应该看到我选择的每个计划的服务呼叫,并证明更改已应用于所有计划。

当前结果:我通过一个循环为每个计划提交 httppatchs。我只看到应用于其中一个的更改。如果我尝试通过断点跟踪代码,最终我会按 F10 并且 chrome 调试器会丢失所有计划的上下文,但其中一个计划除外。这一直是我列表中的 plast 计划。没有记录错误,没有指示发生了什么。同样,我的服务上的断点只会触发一次。

编辑2

将上述内容留作上下文。我最初的问题是我思考可观察对象的方式的一个基本问题。因为我在自动保存功能中更新了 observable 四次,所以订阅它的任何东西都不会像我预期的那样工作是有道理的。正如我们所知,您只会获得最新的对象。这就是为什么只会发生一次更新调用的原因。

经过修补后,我能够使用 Update[] 重新创建上述所有方法。这解决了部分问题。

这按预期工作,但无法满足我的用户要求:

editBulkPlan(plans: Update<Plan>[]): Observable<Plan> {  

    var y = this.http.patch<Plan>(this.odataUrl + "Plans(" + plans[1].id + ")", plans[1].changes, this.httpPatchOptions);

    return y;

    //return this.http.patch<Plan[]>(this.odataUrl + "Plans(" + plan.id + ")", plans.changes, this.httpPatchOptions);
  }

这不起作用。我希望看到两个服务调用。该服务永远不会被调用。我什至从未在 PlanController 中遇到断点。

editBulkPlan(plans: Update<Plan>[]): Observable<Plan> {  

        var x = this.http.patch<Plan>(this.odataUrl + "Plans(" + plans[0].id + ")", plans[0].changes, this.httpPatchOptions);
        var y = this.http.patch<Plan>(this.odataUrl + "Plans(" + plans[1].id + ")", plans[1].changes, this.httpPatchOptions);

        return y;

        //return this.http.patch<Plan[]>(this.odataUrl + "Plans(" + plan.id + ")", plans.changes, this.httpPatchOptions);
      }

标签: angulartypescriptodata

解决方案


推荐阅读