Question

我有两个问题，第一个是我想使用httpclient post方法将数据发送到服务器，如果一切正常，我想发送另一个发布请求。我有第一个表（codeRole，nameRole），在第二个表中（动作，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);
      })
    );

感谢您的帮助

Answer 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

Answer 2

因此，如果我理解正确，您有一个呼叫http服务，然后有N个呼叫另一个http服务，其中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));这些可观察值均代表一个将来致电第二个服务
然后使用forkJoin函数并行触发所有这些服务调用

您可能会采用不同的策略来处理这种情况，这只是其中一种。可以在this article中找到更多详细信息。

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

2 个答案: