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

Question

编辑：我终于在https://plnkr.co/edit/A2WipJwW9kEhhlh90xMj 解决了我的问题。如果您点击选择市场然后按回车，它将在 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)
        });

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

Answer 1

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

你的组件.html (yourObservable | async | slice :0:1)

Answer 2

根据 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（first）

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

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

Plunker Example（地图）

Answer 3

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