在Angular7中的另一个httpclient帖子中发送httpclient帖子答案

【问题标题】：Send httpclient post inside another httpclient post in Angular7在Angular7中的另一个httpclient帖子中发送httpclient帖子
【发布时间】：2020-03-24 01:08:58
【问题描述】：

我有两个问题，第一个是我想用httpclient post方法向服务器发送数据，如果一切正常我想发送另一个post请求。我有第一个表（codeRole，nameRole）和第二个表（action，nameAction），用户可以以相同的形式创建一个角色并将这个角色链接到一个或多个动作，所有这些都注册在一个表 roleAction(id, codeRole, nameRole, action, nameAction)，我不知道如何用 Angular 做到这一点，等待插入我的角色，然后在第三个表中一一插入角色操作。

我的代码可能是这样的：

<form
      fxLayout="column"
      fxFlexAlign="center center"
      fxLayoutGap="10px"
      #newRoleF="ngForm"
      (ngSubmit)="onSubmitRoleF(newRoleF); newRoleF.resetForm({})"
      [hidden]="!showRoleForm"
    >
      <!-- code role -->
      <mat-label> Code Role</mat-label>
      <mat-form-field>
        <input
          matInput
          required
          name="codeRole"
          ngModel
        >
      </mat-form-field>
      <!-- ******** fin code role *********** -->

      <!-- nom role -->
      <mat-label> Nom de role </mat-label>
      <mat-form-field>
        <input
          matInput
          required
          name="nomRole"
          ngModel              
        >
      </mat-form-field>
      <!-- ******** fin nom role *********** -->

      <!-- Role actions -->
      <mat-form-field>
        <mat-label>Actions</mat-label>
        <mat-select name="roleAction" ngModel multiple required>
          <mat-option *ngFor="let action of droitActions" [value]="action">{{action.nom_action}}</mat-option>
        </mat-select>
      </mat-form-field>
      <!-- ******** fin role actions *********** -->
      <div fxLayout="row" fxLayoutGap="10px">
        <button type="submit"
                mat-raised-button
                color="primary"
                [disabled]="newRoleF.invalid"
        >
          Enregistrer
        </button>
      </div>
    </form>

在 .ts 文件中

onSubmitRoleF(newRoleF: NgForm) {
const val = newRoleF.value;
const params = {};
params['code_role'] = val.codeRole;
params['nom_role'] = val.nomRole;
params['role_action'] = val.roleAction
  // first add the role
  this.droitsS.addRole(params)
    .subscribe(
      (resultat) => {
        // once the role added, start to add the role actions one by one, if the user choose two 
        // actions, I must do two httpclient post to add them
      },
      (error => {
       console.log(error);
      })
    );

感谢您的帮助

【问题讨论】：

标签： rxjs angular7 angular-httpclient

【解决方案1】：

async onSubmitRoleF(newRoleF: NgForm) {
const val = newRoleF.value;
const params = {};
params['code_role'] = val.codeRole;
params['nom_role'] = val.nomRole;
params['role_action'] = val.roleAction
  // first add the role
  const result = await this.droitsS.addRole(params)
   .toPromise().catch(err => console.log(err)
  // do your logic and if needed just do it again
const secoundResult = await this.myrequest().toPromise().catch(err => console.log(err)

    );

就像我写的那样，使用 async await 可以让跟踪变得简单和容易。 GL

【讨论】：

【解决方案2】：

所以，如果我理解正确的话，你有一个对 http 服务的调用，然后是对另一个 http 服务的 N 个调用，其中 N 是用户选择的操作数。

假设您有一个数组来保存您的操作，例如myActions，并且第二个服务被命名为saveActions，那么你可以尝试这样的事情

this.droitsS.addRole(params) // call to the first service
.pipe( 
   concatMap(() => {
      const saveActionObservables = myActions.map(action => this.saveAction(action));
      return forkJoin(saveActionObservables)
   })
)
.subscribe(
  (resultat) => {
    // here you do anything you want with the result
  },
  (error => {
   console.log(error);
  })
)

这里发生的情况如下。一旦第一个调用返回，您就进入指定为concatMap 参数的函数。这个函数做了两件事：

首先它使用代码创建一个 Observables 数组 saveActionObservables = myActions.map(action => this.saveAction(action));这些 Observable 中的每一个都代表一个将来调用第二个服务
然后它使用forkJoin 函数并行触发所有这些服务调用

您可以采用不同的策略来处理这种情况，这只是其中一种。更多详情请见this article。

【讨论】：