Question

angular 2 async observable @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

@RemyaJ是严格的，问题来自于角度的detectchange处理，以避免我这样做并且它工作正常:) :)。

不要在模板中调用函数，并使用异步此结果无限循环

Answer 2

尝试

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

并在模板中

[appointments]="appointments"

angular 2 async observable @Input

2 个答案: