Angular Materials Modal: Почему моя переменная не определена в подписке, а не в методе карты?

Question

Я использую Angular 6 с угловыми материалами.

В моем модале у меня есть:

<div style="display: flex; justify-content: space-between" >
  <button color="primary" mat-button [mat-dialog-close]="false">Cancel</button>
  <button color="primary" mat-button [mat-dialog-close]="gizmo">{{inEditMode === true ? "Save" : "Add"}}</button>
</div>

Таким образом, модальное значение будет возвращать либо false (если пользователь нажимает кнопку отмены), либо возвращает объект gizmo (если пользователь нажимает кнопку add).

В классе, который вызывает модал, у меня есть следующий код. Когда я отлаживаю переменную x, она содержит объект gizmo. Однако, как только это завершится, x будет неопределен в подписке. Это почему? Разве х не должен содержать гизмо, как это было на карте?

addGizmo() {
    let gizmo = new Gizmo();
    this.tagSubject.next(gizmo);

    let dialogEdit = this.dialog.open(DialogGizmo,
      {
        width: "300px",
        data: { },
      });

    dialogEdit.afterClosed()
      .pipe(map(x => {
        if (x !== false) {
          gizmo.value = x.GizmoValue;
          gizmo.description = x.GizmoDescription;
        }
      }))
      .subscribe(x => {
      if (x !== undefined) {
        this.dataCatalogService.addGizmo(gizmo)
        .subscribe(
          () => this.loadGizmos(),
          error => this.handleError(error)
        );
      }
    });
};

Answer 1

Как ответил @ ArtemArkhipov , вы ничего не возвращаете в своей функции map.

Хотя это должно решить вашу проблему, я думаю, что вы можете улучшить читабельность кода следующим образом

<!-- Not returning something will return '' -->
<button color="primary" mat-button mat-dialog-close>Cancel</button>
<button color="primary" mat-button [mat-dialog-close]="gizmo">{{inEditMode === true ? "Save" : "Add"}}</button>

dialogEdit.afterClosed()
  .pipe(
    // filter : if the response is falsy, don't go further ('' is falsy)
    filter(res => !!res),
    // tap the answer, because you don't want to change it, only update your variable
    tap(x => {
      gizmo.value = x.GizmoValue;
      gizmo.description = x.GizmoDescription;
    }),
    // Use mergeMap to chain another HTTP call and get rid of one subscribe
    mergeMap(x => this.dataCatalogService.addGizmo(gizmo))
  ).subscribe(
    () => this.loadGizmos(),
    error => this.handleError(error)
  )
);

Это уменьшает ваш код и улучшает его читаемость. Без комментариев это дает

dialogEdit.afterClosed()
  .pipe(
    filter(res => !!res),
    tap(x => {
      gizmo.value = x.GizmoValue;
      gizmo.description = x.GizmoDescription;
    }),
    mergeMap(x => this.dataCatalogService.addGizmo(gizmo))
  ).subscribe(
    () => this.loadGizmos(),
    error => this.handleError(error)
  )
);

Answer 2

Ваш map канал возвращает неопределенное значение. Добавьте return x в конце вашей карты.

dialogEdit.afterClosed()
  .pipe(map(x => {
    if (x !== false) {
      gizmo.value = x.GizmoValue;
      gizmo.description = x.GizmoDescription;
    }
    return x;  // THIS LINE
  }))
  .subscribe(x => {
  if (x !== undefined) {
    this.dataCatalogService.addGizmo(gizmo)
    .subscribe(
      () => this.loadGizmos(),
      error => this.handleError(error)
    );
  }
});

map труба принимает значение и должна возвращать любой результат, который вам нужен для передачи в другие трубы. Подробнее о map здесь

P.S. Кажется, что вам на самом деле не нужен map канал здесь, потому что вы не преобразовываете входящее значение. Взгляните на do / tap оператора .