角2異步觀察到@input

Question

角2異步觀察到@input

在我的組件我有我想要的感覺，當觀察到的返回值的屬性輸入。

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

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

是否有可能做這樣的事情？

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); 
    } 





} 

儀表板模板

<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> 

Answer 1

嘗試

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

，並在模板

[appointments]="appointments" 

Answer 2

@RemyaJ是rigth，問題來自檢測角度的處理，以避免我這樣做，它工作正常:) :)。

不調用模板函數與異步這個結果無限循環