angular 2 async observable @Input

Question

In my component i have an property input that i want to feel when observable return value.

getAppointments(askForAnswerId: number): Observable<Appointment[]> {
return this.appointmentService.GetByAskForAnswerId(askForAnswerId);
}

<app-appointment [appointments]="
(getAppointments(askForAnswer.askForAnswerId) | async)"></app-appointment>

is it possible to do something like that ?

DashboardService

import { Injectable, OnInit } from '@angular/core';
import { AskForAnswerService } from "app/services/ask-for-answer.service";
import { Observable } from "rxjs/Observable";
import { AuthenticationService } from "app/services/auth/auth.service";
import { ApplicationUser } from "app/model/account/application-user";
import { AskForAnswer } from "app/model/ask-for-answer";
import { AppointmentService } from "app/services/appointment.service";
import { Appointment } from "app/model/appointment";

@Injectable()
export class DashboardService {

  constructor(
    private userService: AuthenticationService,
    private askForAnswerService: AskForAnswerService,
    private appointmentService: AppointmentService
  ) { }

  getUser(): Observable<ApplicationUser> {
    return this.userService.getUser();
  }

  getActiveAskForAnswer(email: string): Observable<AskForAnswer[]> {
    return this.askForAnswerService.GetActiveByEmail(email);
  }

  getAppointments(askForAnswerId: number): Observable<Appointment[]> {
    return this.appointmentService.GetByAskForAnswerId(askForAnswerId);
  }


}

DashboardComponent

import { Component, OnInit } from '@angular/core';
import { USER_NAV } from "app/model/forms/nav-item";
import { DashboardService } from "app/modules/user/dashboard/dashboard.service";
import { Observable } from "rxjs/Observable";
import { ApplicationUser } from "app/model/account/application-user";
import { AskForAnswer } from "app/model/ask-for-answer";
import { MdSnackBar } from "@angular/material";
import { DashboardServiceProvider } from "app/modules/user/dashboard/dashboard.service.providers";
import { Appointment } from "app/model/appointment";

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss'],
  providers: [DashboardServiceProvider]
})
export class DashboardComponent implements OnInit {

  links = USER_NAV;
  user$: Observable<ApplicationUser>;
  askForAnswersActive$: Observable<AskForAnswer[]>;
  count: number = 0;

  constructor(
    private dashboardService: DashboardService,
    public snackBar: MdSnackBar) {
    this.user$ = this.dashboardService.getUser();
    this.user$.subscribe(
      res => this.userSubscribers(res),
      errors => console.error(JSON.stringify(errors))
    );

  }

  ngOnInit() {


  }

  private userSubscribers(user: ApplicationUser): void {
    if (user) {
      this.askForAnswersActive$ = this.dashboardService.getActiveAskForAnswer(user.email);
      this.snackBar.open("Bienvenu " + user.familyName + " " + user.givenName, null, { duration: 3000 });
    }
  }

  private getAppointments(askForAnswerId: number): Observable<Appointment[]> {
    return this.dashboardService.getAppointments(askForAnswerId);
  }





}

Dashboard template

<div *ngFor="let askForAnswer of askForAnswersActive$ | async">

    <app-appointment [appointments]="(getAppointments(askForAnswer.askForAnswerId) | async)"></app-appointment>


</div>

AppointementTemplate

<div *ngFor="let appointment of appointments">
  <span>{{appointment | json}}</span>

</div>

yes, it's possible, what is your problem? did you try to implement it? — Max Koretskyi
– Max Koretskyi, Commented Apr 10, 2017 at 13:44
Try this.appointments = this.appointmentService.GetByAskForAnswer(); and in template [appointments]="appointments" — RemyaJ
– RemyaJ, Commented Apr 10, 2017 at 13:48
appointments$: Map<number, Observable<Appointment[]>>; asks.forEach(ask => this.appointments$.set(ask.askForAnswerId, this.getAppointments(ask.askForAnswerId))); <app-appointment [appointments]="(appointments$.get(askForAnswer.askForAnswerId) | async)"></app-appointment> — Yoamb
– Yoamb, Commented Apr 11, 2017 at 8:01

RemyaJ · Accepted Answer · 2017-04-11 09:13:47Z

1

Try

this.appointments = this.appointmentService.GetByAskForAnswer();

and in template

[appointments]="appointments"

answered Apr 11, 2017 at 9:13

RemyaJ

5,5264 gold badges25 silver badges42 bronze badges

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

Comments

Yoamb · Accepted Answer · 2017-04-11 08:08:05Z

1

@RemyaJ is rigth, the problem come from detectchange processing of angular , to avoid that i do this and it works fine :) :).

don't call function in template with async this result infinite loop

answered Apr 11, 2017 at 8:08

Yoamb

4851 gold badge5 silver badges17 bronze badges

Collectives™ on Stack Overflow

angular 2 async observable @Input

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related