Angular 2-4 observable that comes from a click event

Question

I have a function that returns an Observable when a row in a table is clicked.

private onEnrollmentHistory(val: Enrollment[]) {
        this.enrollments = val;
        console.log(this.enrollments);
    }

    getEnrollmentHistoryById(id: number) {
        this.toggleMoreInfoDialog();
        return this.store.getEnrollmentHistoryById(id)
            .subscribe(
                this.onEnrollmentHistory
            );
    }

I'm not sure how to get this info into the component HTML. I can't do <div *ngFor="let enroll of someService | async"> because the ID isn't known until someone clicks on it. Is there some syntax I'm missing to have some text in a div bound to this Observable? something like <div (ngModel)="this.bSubject.getValue()">?

the function is called from a table row

<td>
 (click)="getEnrollmentHistoryById(id)" class="fa fa-2x fa-info">
</td>


 <div class="container">
      <div class="row">
         here are enrollments
          <div *ngFor="let e of enrollments">
                {{e}}
            </div>
       </div>
 </div>

This is meant to be read only, I just need grab something from the DB with the observable, and show it on the page on a click event.

Quite unclear, since we have no idea of what you're trying to achieve. But how about <div>{{ bSubject.getValue() }}</div>. Not even sure why you use a BeahaviorSubject to store the value, instead of just storing the value in your component directly. — JB Nizet
@JBNizet I added a little more context. Basically I'm asking if there's an Angular way to remove the need for my onEnrollmentHistory function were I have a state variable to populate once the request is finished. Even doing it the way with the extra HTML I added I'm not seeing anything in the component HTML change, even though in the console the correct data is being set. — wootscootinboogie

wootscootinboogie wootscootinboogie · Accepted Answer · 2017-07-06T15:01:54

My solution was to add a variable to the component enrollmentHistory = new Observable<Enrollment[]>(null); and on the click event do

enrollmentHistory = this.getEnrollmentHistoryById(id) and in the view <div *ngFor="let e of enrollmentHistory | async"> and this gave me what i needed.

Angular 2-4 observable that comes from a click event

1 Answers