Question

编辑：我终于在https://plnkr.co/edit/A2WipJwW9kEhhlh90xMj处遇到了问题。如果您点击选择市场然后按Enter键，它将在market-search.component.ts文件中输入marketSelectorDropDown方法。问题出在地图下面的几行中，订阅永远不会执行，直到再次点击选择市场下拉列表。我不懂为什么。任何帮助是极大的赞赏！

this.markets
        .map(markets => {
            debugger
            if(markets && markets.length > 0) return markets[0];
        })
        .subscribe((market: Market) => {
            debugger
            this.pick(market.name)
        });

编辑：在标记为答案的那个评论中是答案。它是使用BehaviorSubject。这允许迟到的订阅者发送最后一个事件。

Answer 1

根据RxJS5文档

http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-first

第一位运营商

如果不带参数调用，则首先发出源的第一个值观察，然后完成。如果使用谓词函数调用，则首先发出匹配指定源的第一个值条件。它也可能需要一个resultSelector函数来生成输入值的输出值，以及发出的defaultValue 源在能够发出有效值之前完成。抛出如果未提供defaultValue且匹配的元素是错误，则会出现错误没找到。

如果你从事件

处理Observable，它会很有用

例如，仅发出DOM上发生的第一次单击（如jQuery中的.one）

var clicks = Rx.Observable.fromEvent(document, 'click');
var result = clicks.first();
result.subscribe(x => console.log(x));

或者您可以在此答案Angular 2 runOutsideAngular still change the UI

中查看其他用例

所以它并不完全符合您的要求，但您可以像这样使用它：

.first(null, arr => arr[0]).subscribe...

它应返回数组 Plunker Example 所需的第一个元素（第一个）

但我会利用map运算符来做同样的事情：

.map(arr => arr[0]).subscribe...

<强> Plunker Example （地图）

Answer 2

您的示例不起作用，因为您正在使用CDN for RxJS 2，您需要RxJS 5。我试图将CDN替换为版本5，它工作得很好。

Answer 3

我能够使用angular的异步管道访问Observable的第一个成员。

yourComponent.html （yourObservable | async | slice：0：1）

Angular2访问数组的Observable中的第一个元素

3 个答案: