主页 / coding / 问题 / 79585002
Accepted
derstauner
Asked: 2025-04-22 00:54:56 +0800 CST

不触发 HTTP 请求的情况下过滤可观察对象

  • 772

我使用以下代码行填充网格：

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

对应的 HTML 代码如下：

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

它按预期工作。

我还有一个删除按钮。点击该按钮会删除用户。之后，我想从列表中删除该用户，但又不想发出额外的 HTTP 请求。我试过了shareReplay，但还是有额外的请求：

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

如何过滤网格数据以便删除已删除的用户而无需任何额外的 HTTP 请求？还是应该在初始化时将用户存储在局部变量中，并在添加、编辑或删除时修改数组并将其转换为可观察对象？

angular

3 个回答

  1. Best Answer

    只需添加一个deletedUsers属性BehaviorSubject，即存储已删除的用户。

    我们使用它combineLatest来过滤数据，而无需通过 API 重新获取。behaviorSubject 的更改 deletedUsers将触发重新计算。

      deletedUsers = new BehaviorSubject([]);

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

    当您删除用户时，将 ID 推送到deletedUsersbehaviorSubject。

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

    注意： 在 CRUD 操作之后刷新列表通常是一个好主意，这样您的最终用户就不会使用过时的数据。

    • 1

  2. 基于 Naren Murali 的回答。最好将用户数据的完全所有权赋予服务。目前看来，服务只是获取了数据，然后数据就属于组件了。将服务更改为类似以下内容可能会有所帮助：

    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
    // ...
  }
}

    然后，您的组件可以使用this.userService.user$和this.userService.deleteUser()与用户数据进行交互，同时继续让服务负责用户。您还可以向服务添加其他方法，以支持添加、过滤和分页等功能。这种方法很好，因为它将用户获取方式/时间的详细信息保留在组件之外。如果您稍后需要更改逻辑，组件不会关心服务是从服务器刷新、执行内存删除还是查找其他方法。这些细节是服务的问题，而不是组件的问题。

    • 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);
}

    在 HTML 上：

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

相关问题