Início / coding / Perguntas / 79585002
Accepted
derstauner
Asked: 2025-04-22 00:54:56 +0800 CST

Filtrar observável sem disparar solicitação HTTP

  • 772

Eu preencho uma grade com a seguinte linha de código:

this.gridData$ = this.userService.getUsers();

e este é o HTML correspondente:

[kendoGridBinding]="(gridData$ | async)!"

Funciona como esperado.

Também tenho um botão de exclusão. Clicar nele exclui o usuário. Depois disso, quero remover o usuário da lista, mas sem fazer uma solicitação HTTP extra. Tentei shareReplay, mas a solicitação extra está lá:

this.gridData$ = this.gridData$.pipe(
              shareReplay({ bufferSize: 1, refCount: true }),
              map((users) => {
                return users.filter(
                  (user) => user.userId !== this.currentDataItem.userId
                );
              })
            );

Como filtrar os dados da grade para excluir o usuário excluído sem nenhuma solicitação HTTP adicional? Ou devo armazenar os usuários em uma variável local no init e modificar o array ao adicionar, editar ou excluir e convertê-lo em um observável?

angular

3 respostas

  1. Best Answer

    Basta adicionar uma deletedUserspropriedade que seja um BehaviorSubject, que armazena os usuários excluídos.

    Usamos combineLatestpara filtrar os dados, sem precisar buscá-los novamente pela API. As alterações no deletedUsersbehaviorSubject acionarão um recálculo.

      deletedUsers = new BehaviorSubject([]);

  this.gridData$ = combineLatest(
    this.userService.getUsers(),
    this.deletedUsers
  ).pipe(
    map((users: any, deletedUsers: any) => users.filter(
       (user) => !deletedUsers.includes(user.userId)
    ));
  );

    Ao excluir um usuário, envie o ID para deletedUsersbehaviorSubject.

    this.deletedUsers.next([
  ...(this.deletedUsers.value() || []),
  1, // <--- deleted ID
]);

    OBSERVAÇÃO: Geralmente, é uma boa ideia atualizar a lista após as operações CRUD, para que seus usuários finais não trabalhem com dados obsoletos.

    • 1

  2. Com base na resposta de Naren Murali, talvez seja melhor dar ao serviço a propriedade total sobre os dados do usuário. No momento, parece que o serviço apenas obtém os dados, que depois pertencem ao componente. Alterar seu serviço para algo como o seguinte pode ajudar:

    export class UserService {
  private deletedUserIdsSubject = new BehaviorSubject<number[]>([]); // list of user IDs that have been deleted

  public users$: Observable<User[]> = // public users observable that your components can use
    combineLatest([this.getUsers(), this.deletedUserIdsSubject]).pipe(
      map(([users, deletedUserIds]) => users.filter(user => !deletedUserIds.includes(user.id))) // filter out deleted users
    );

  public deleteUser(userId: number) {
    this.deletedUserIdsSubject.next([userId, ...this.deletedUserIdsSubject.getValue()]);
  }

  private getUsers(): Observable<User[]> { // make this private so that only the service can decide when to get fresh data
    // ...
  }
}

    Seu componente poderia então usar this.userService.user$e this.userService.deleteUser()interagir com os dados do usuário, permitindo que o serviço se responsabilize pelos usuários. Você também pode adicionar métodos adicionais ao serviço para oferecer suporte a recursos como adição, filtragem e paginação. Essa abordagem é boa porque mantém os detalhes de como/quando os usuários são recuperados do componente. Se você precisar alterar a lógica posteriormente, o componente não se importa se o serviço atualiza a partir do servidor, faz uma exclusão na memória ou encontra algum outro método. Esses detalhes são problema do serviço, não do componente.

    • 0 
  3. public readonly users = signal([]);

public ngOnInit(): void { 
  this.fetchUsers();
}

private fetchUsers(): void {
  this.userService.getUsers().pipe(take(1)).subscribe((data) => {
    this.users.set(data);
);
}

private onDeleteSuccess(userId: number): void {
 const filteredUsers = this.users()?.filter((user) => user.userId !== userId);

 this.users.set(filteredUsers);
}

    e em HTML:

    [kendoGridBinding]="users()"
    • -1

relate perguntas