刷新列表：Angular2 + RxJS

我具有其中我显示数据（用户）的一个表中的组分从一个http请求的API生成的。有各种各样的桌子上的过滤器，所以我生成表数据，如下所示：刷新列表：Angular2 + RxJS

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$ s为响应于在模板改变它们的输入发射的新值BehaviorSubjects。 users$被分配如下：

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

凡getList()返回一个HTTP请求来获取用户的列表。

列表成功更新每当过滤器改变了，但我有问题，当我需要更新与新的用户列表。例如，用户可以在用户表上执行CRUD操作（即删除用户）。但是，当用户被删除时，该表不会更新以反映此更改。我目前使用的方法（试行），以新鲜的表是通过删除操作的成功回调调用刷新功能：

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

尽管手术后调用此完成，combineLatest观察到的不再次得到“触发”，列表数据仍旧陈旧。有没有更好的方法来刷新combineLatest与http请求生成的数据？

来源

2017-10-10 natmegs

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

这是一个知道如何解决它的骨架：

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

来源

2017-10-10 19:22:40

这使得有很大的意义，感谢您的建议。我觉得我失去了与我然而实施东西，因为现在我没有得到任何表中的数据（即使当我改变过滤器）。我更改refreshUserList（）{updateUsersTrigger.next（）; }并在ngOnInit（）中调用它，但仍然没有运气。 – natmegs

@natmegs，尝试这样的事情：'updateUsersTrigger.startWith（空）.switchMap（（）=> ...呼叫服务...）'代替ngOnInit（）发光的东西 - 我不希望它的工作实际上，我认为这太早了。 –

我不能没有发表评论，所以我会在这里写，纠正我，如果我错了，或者如果这超出了这个问题。如果您在成功使用.splice()删除更新DOM而不是发送另一个HTTP请求的，那不是更容易和客户端上少使劲？

来源

2017-10-10 19:32:37

无论哪种方式OP需要一些可观察到发射新的数组，可以是HTTP请求或剪接（）导致一些Observable.map（）或别的东西。 –

刷新列表：Angular2 + RxJS

回答

相关问题