RXJS - 如果来自可观察的值满足特定条件，则执行函数答案

【问题标题】：RXJS - Execute function if a specific condition is met on a value from a observableRXJS - 如果来自可观察的值满足特定条件，则执行函数
【发布时间】：2016-07-14 15:44:39
【问题描述】：

我已经建立了一个带有自动完成功能的搜索字段。我正在听一个检测文本字段变化的可观察对象。

this.term.valueChanges
        .debounceTime(300)
        .distinctUntilChanged()
        .filter(query=>query.toString().length>1)
        .subscribe(query => { 

         //Execute search function and populate dropdown menu

        })

当用户搜索字符串时，下拉自动完成列表会填充建议。如果用户随后删除了我希望删除下拉列表的搜索字符串。如果从可观察流生成的值满足特定条件，是否有 RxJS 函数可以在订阅之前执行函数？

【问题讨论】：

您也可以在订阅中移动过滤器并在那里使用控制流。如果more than one character 照常执行，如果没有字符（搜索字符串的擦除）执行其他操作。看起来是最简单的解决方案，但不是更易于维护。
这就是我到目前为止所做的，但我认为使用许多 rxjs 方法之一可能存在更优雅的解决方案。
您的问题似乎不合理。订阅只发生一次，搜索字符串的擦除可以发生任意次数。因此，即使存在这样的 Rxjs 运算符，它也无济于事。最后，您想要的是一种以可维护的方式将控制流添加到数据流的方法。从 MVI 中获取线索，我将使用 event -> intent -> action 数据流，具有两个意图：erasal、updated_search，以及相应的操作：fetch_suggestions、remove_dropdown_list 并订阅它。控制流是通过您使用的运算符中的普通if 添加的。

标签： javascript angular reactive-programming rxjs

【解决方案1】：

试试这样的：

this.term.valueChanges
    .debounce(100)
    .distinctUntilChanged()
    .do(() => /* close list here */)
    .where(val => val.length > 1)
    .select(query => ({ 
        query: query, 
        completions: completions
            .filter(w => w.indexOf(query.toLowerCase()) !== -1)
    }))
    .subscribe(r => {
        /*
         * r.query          contains the current search word
         * r.completions    contain the completions for that word
         */
    });

JSFiddle 上的工作基本示例

【讨论】：