Angular2访问数组的第一个元素

编辑：我终于在https://plnkr.co/edit/A2WipJwW9kEhhlh90xMj得到了我的问题。如果您点击选择市场，然后按回车，它将在market-search.component.ts文件中输入marketSelectorDropDown方法。问题出现在地图下方的几行，订阅从不执行，直到再次点击选择市场下拉菜单。我不懂为什么。任何帮助是极大的赞赏！Angular2访问数组的第一个元素

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

编辑：在一个标记为答案的评论是答案。它是使用BehaviorSubject。这允许后期用户获得最后发送的事件。

来源

2016-12-01 avidgoffer

根据RxJS5文档

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

首先操作者

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

它有用的，如果你从事件

例如对付可观的，仅发射第一次点击是的DOM（如.one jQuery中）发生

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（地图）

来源

2016-12-01 20:07:29 yurzui

当我尝试：'this.markets .first（null，markets => markets [0]） .subscribe（（market：Market）=> { this.pick（market。名称） }）; '并在订阅方法中设置一个断点，它永远不会被命中。 – avidgoffer

这不应该返回1吗？ https://jsfiddle.net/j86afj61/ – avidgoffer

Angular2使用rxjs5。我加入了蹲点。有虚拟json，它总是返回'name1' – yurzui

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

来源

2016-12-01 21:41:03 Avi

谢谢你的帮助。我意识到我没有在例子中使用错误的版本，但是我仍然无法在现实世界中使用它。 – avidgoffer

在您的标记中，尝试使用:(keydown.enter），不使用大写字母。 – Avi

事件的外壳不是问题。该事件会在[plunk]中触发（https://plnkr.co/edit/A2WipJwW9kEhhlh90xMj?p=preview）。问题是因为我在地图上方重申并订阅，直到将新的searchTerm添加到主题中才订阅。 – avidgoffer

Angular2访问数组的第一个元素

回答

相关问题