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訪問數組的第一個元素

回答

相關問題