Повторно инициировать вызов службы, чтобы повторить асинхронный запрос - PullRequest
Новая
       13

Повторно инициировать вызов службы, чтобы повторить асинхронный запрос

2 голосов
/ 22 января 2020

Представьте себе список пользователей, отображаемый в компоненте Angular. Я внедряю свой сервис и подписываюсь на него в своем шаблоне.

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

компонент: 

export class UserComponent implements OnInit {
  public users$!: Observable<User[]>;

  constructor(
    public dialog: MatDialog,
    private userService: UserService,
  ) {}

  public ngOnInit() {
    this.users$ = this.userService
      .getAllUsers$()
      .pipe(take(1));
  }

  public openAddUserDialog() {
    this.dialog
      .open(AddUserDialogComponent)
      .afterClosed()
      .subscribe(() => {
        // TODO re-trigger observable here?
      });
  }
}

шаблон: 

<p *ngFor="user of users$ | async">{{ user.name }}</p>

Как повторно вызвать сервисный вызов в функции afterClosed() из диалогового окна? Я не хочу подписывать это в моей подписке.

Я считаю, что должен быть шаблон для объединения возвращаемого значения getAllUsers$() с другим Observable и pu sh что-то там, а затем повторно вызвать процесс.

Ответы [ 2 ]

1 голос
/ 23 января 2020

Я закончил тем, что использовал оператор reapeatWhen(), так как это, на мой взгляд, самый интуитивный и описательный способ.

Настройте мой ответ так, чтобы список пользователей пополнялся только тогда, когда пользователь было действительно добавлено 

export class UserComponent implements OnInit {
  public users$!: Observable<User[]>;

  private refetchUsers$ = Subject();

  constructor(
    public dialog: MatDialog,
    private userService: UserService,
  ) {}

  public ngOnInit() {
    this.users$ = this.userService
      .getAllUsers$()
      .pipe(
        take(1),
        repeatWhen(() => refetchUsers$),
      );
  }

  public openAddUserDialog() {
    this.dialog
      .open(AddUserDialogComponent)
      .afterClosed()
      .pipe(filter((userAdded) => userAdded))
      .subscribe(() => {
        this.refetchUsers$.next();
      });
  }
}
0 голосов
/ 22 января 2020

Не знаю, является ли это лучшей практикой, но не могли бы вы попробовать это: 

export class UserComponent implements OnInit {
  public users$!: Observable<User[]>;

  constructor(
    dialog: MatDialog,
    private userService: UserService,
  ) {}

  ngOnInit() {
    this.getUsers();
  }

  openAddUserDialog() {
    this.dialog
      .open(AddUserDialogComponent)
      .afterClosed()
        .pipe(
          filter(user => !!user), // Avoid closing modal without creating a new user
          tap(() => this.getUsers()))
      .subscribe();
  }

  getUsers() {
    this.users$ = this.userService
      .getAllUsers$()
      .pipe(take(1));
  }
}
...