繁体   English   中英

使用CombineLatest刷新列表:Angular2 + RxJS

[英]Refreshing list using combineLatest: Angular2 + RxJS

我有一个组件,其中显示了从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操作(即删除用户)。 但是,删除用户后,该表不会更新以反映此更改。 我当前用来(尝试)刷新表的方法是通过在delete操作的成功回调中调用刷新函数:

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

尽管在操作完成后调用了此方法,但是CombineLatest observable不会再次被“触发”,并且列表数据仍旧。 有没有更好的方法来刷新CombineLatest用http请求生成的数据?

主要问题是,在用户列表更新的情况下,可观察的用户$不会发出任何新值。 您必须这样做。

这是一个解决方法的基本构架:

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();

我目前无法发表评论,因此如果我错了或者这是不可能的话,我会在这里写并纠正我。 如果在成功删除时使用.splice()来更新DOM而不是发送另一个http请求,那岂不是更容易且对客户端的.splice()更少?

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM