2

EDIT: I finally got my problem going in a plunk at https://plnkr.co/edit/A2WipJwW9kEhhlh90xMj. If you hit the select market then press enter it will enter the marketSelectorDropDown method in the market-search.component.ts file. The problem is in the few lines below the map and subscribe never execute until the select market dropdown is clicked again. I do not understand why. Any help is greatly appreciated! 

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

EDIT: In the comments of the one marked as the answer is the answer. It is to use a BehaviorSubject. This allows late subscribers to get the last event sent.

Improve this question

3 Answers 3

Reset to default
4

I was able to access the Observable's first member by using angular's async pipe.

yourComponent.html (yourObservable | async | slice :0:1)

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

3

According to RxJS5 documentation

First operator

If called with no arguments, first emits the first value of the source Observable, then completes. If called with a predicate function, first emits the first value of the source that matches the specified condition. It may also take a resultSelector function to produce the output value from the input value, and a defaultValue to emit in case the source completes before it is able to emit a valid value. Throws an error if defaultValue was not provided and a matching element is not found.

It usefull if you deal with Observable from event

For example, emit only the first click that happens on the DOM (like .one in jQuery)

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

Or you can look at other use case in this answer Angular 2 runOutsideAngular still change the UI

So it isn't exactly that what you want, but you can use it like this:

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

and it should return desired first element of array Plunker Example(first)

But i would leverage map operator to do the same:

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

Plunker Example(map)

Improve this answer

8 Comments

When I try: ` this.markets .first(null, markets => markets[0]) .subscribe((market: Market) => { this.pick(market.name) }); ` and set a breakpoint in the subscribe method it is never hit.
Angular2 uses rxjs5. I added plunker. There is dummy json and it always returns name1
I really appreciate your example and I see how it works now, but when I take your code and apply it to mine it doesn't work. I don't understand why. Do you have any thoughts? I've included the entire ts file this time in my question.
I got my problem in a plunk The problem is as I have restated above the map and subscribe never fire until a new searchTerm is added to the subject.
Observables are lazy. Try to subscribe before emitting event plnkr.co/edit/4Oo5WZzjL6b7O8SV6IFj?p=preview
|
0

Your example doesn't work because you are using CDN for RxJS 2, You need RxJS 5 for this. I tried to replace the CDN to version 5 and it was working just fine.

Improve this answer

3 Comments

Thank you for your help. I realize not I was using wrong version in example, but I am still unable to get it to work in my real world situation.
In your Markup, try to use: (keydown.enter), no capital letters.
the casing of the event is not the problem. the event fires as you can in this plunk. The problem is as I have restated above the map and subscribe never fire until a new searchTerm is added to the subject.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.