Question

我有一个组件，我在其中显示从http请求到API生成的数据表（用户）。表上有各种各样的过滤器，所以我生成表数据如下：

this.displayUsers$ = Observable.combineLatest(
            this.users$,
            this.siteFilter$,
            this.clientFilter$,
            this.activeFilter$,
            this.nameFilter$
        )
            .map(([users, siteFilter, clientFilter, activeFilter, nameFilter]) => {
                console.log("Users changed? ", users);
                if (siteFilter === null
                    && clientFilter === null
                    && activeFilter === null
                    && nameFilter.length < 1) {
                    return users;
                }
                return users
                    .filter(user => {
                        // manipulate users array based on filters
                    })
            });

xFilter$是BehaviorSubjects，它们发出新值以响应模板中输入的更改。 users$分配如下：

this.users$ = this.userService.getList();

getList()返回http请求以获取用户列表。

每当更改过滤器时，列表都会成功更新，但是当我需要使用新用户更新列表时，我会遇到问题。例如，用户可以对用户表执行CRUD操作（即删除用户）。但是，删除用户时，表不会更新以反映此更改。我目前用来（尝试）刷新表的方法是在删除操作的成功回调中调用刷新函数：

refreshUserList() {
        console.log("Refreshing user list");
        this.users$ = this.userService.getList();
    }

尽管在操作完成后调用了此函数，但仍然无法触发combineLatest observable＆＃39;再次，列表数据仍然陈旧。是否有更好的方法来刷新combineLatest与http请求生成的数据？

Answer 1

主要问题是，在用户列表更新的情况下，用户$ observable不会发出任何新值。你必须这样做。

这是一个如何修复它的想法的骨架：

const updateUsersTrigger = new Subject<void>();

this.displayUsers$ = Observable.combineLatest(
    // switchMap() will re-subscribe to this.userService.getList() observable on each emit from updateUsersTrigger
    // thus making http requests each time when user list should be updated.
    updateUsersTrigger.startWith(null).switchMap(() => this.userService.getList()),
    this.siteFilter$,
    this.clientFilter$,
    this.activeFilter$,
    this.nameFilter$
)
    .map(([users, siteFilter, clientFilter, activeFilter, nameFilter]) => {

    .......

});

// this will trigger user list update
updateUsersTrigger.next();

Answer 2

我还没有发表评论，所以如果我错了，或者这是不可能的，我会写在这里并纠正我。如果您在成功删除时使用.splice()来更新DOM而不是发送另一个http请求，那么这对客户端来说会不会更容易且更少紧张？

使用combineLatest刷新列表：Angular2 + RxJS

2 个答案: