Отправить сообщение httpclient внутри другого сообщения httpclient в Angular7 - PullRequest
Новая
       0

Отправить сообщение httpclient внутри другого сообщения httpclient в Angular7

0 голосов
/ 23 марта 2020

У меня две проблемы, во-первых, я хочу отправить данные на сервер методом httpclient post, и если все в порядке, я хочу отправить другой запрос post. У меня есть первая таблица (codeRole, nameRole), а во второй таблице (action, nameAction) в той же форме пользователь может создать роль и связать эту роль с одним или несколькими действиями, и все это будет зарегистрировано в table 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);
      })
    );

спасибо за вашу помощь

Ответы [ 2 ]

0 голосов
/ 23 марта 2020

Итак, если я правильно понял, у вас есть один вызов службы 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. Эта функция делает 2 вещи:

  1. сначала она создает массив наблюдаемых с кодом saveActionObservables = myActions.map(action => this.saveAction(action)); каждый из этих Observables представляет будущий вызов второй службы
  2. , затем он запускает все эти вызовы параллельно, используя функцию forkJoin

Вы можете следовать различным стратегиям для решения этой проблемы случай, это только один. Более подробную информацию можно найти в этой статье .

0 голосов
/ 23 марта 2020 
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)

    );

, как я написал, используйте asyn c и ждите, чтобы его было проще и легче отслеживать. ГЛ

...