Question

我正在学习Angular 2我很抱歉如果我太蠢了，但我似乎无法工作多个链异步函数......

我将尝试解释和缩写我的代码，我正在请求API的get方法，它是一个员工列表，员工列表必须显示在当前工作正常的表中，称为“listToDisplay “，但问题是当日历显示时，它没有向我显示任何生日，我正在填写列表雇员生日

我已经发现当我调用updateCalendar方法时，系统不会等待listEmployeeBirthday被填写，正如我在代码中所示，我在控制台中记录了listEmployeeBirthday并且它正确填充但是出现警告消息：“Value下面刚刚评估了“。我已经尝试了一切来解决这个问题，但是在getEmployees完成之后，我似乎没有得到updateCalendar执行的工作。

我将不胜感激任何帮助

ngOnInit(){

  this.getEmployees()

  this.updateCalendar()

  console.log("listEmployeeBirthday")

}



getEmployees(){

  this.http.get("apiadress...")
      .flatMap((response:Response) => response.json());
      .map((employee)=>{
        this.addCalendar(employee);
        this.listToDisplay.push(employee)
        })
      .subscribe();
}

addCalendar(employee){
  this.listEmployeeBirthday.push(employee.birthdate);
}


updateCalendar(){
  methodToUpdateCalendar(this.listEmployeeBirthday)
}

Answer 1

您应该解决之前加载的listEmployeeBirthday（）。在角度，我们可以在激活路线之前解决服务。请点击以下链接。

https://angular.io/docs/ts/latest/api/router/index/Resolve-interface.html

创建如下所示的决心

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { yourservice } from './yourservice';

@Injectable()
export class AppResolve implements Resolve<any> {
constructor(private dropDownService: DropDownService) { }
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): any[] {
    return listEmployeeBirthday;// return your service here.
}
}

在appModule提供程序中添加以上解析。并在路由器添加如下。

 { path: 'currentRoute',  component: component, resolve: [resolveMethodcreatedabove]},

在您当前的组件中获取已解决的服务，如下所示

 import { Router, ActivatedRoute } from '@angular/router'
 constructor(private currentRoute: ActivatedRoute) { 

 }
 ngOnInit() {
     this.currentRoute.data.subscribe(data => listEmployeeBirthday = data);
  }

Answer 2

是的，您的updateCalendar函数无法执行任何操作，因为getEmployees是异步的。因此，您需要在员工加载时更新日历：

this.http.get("apiadress...")
  .flatMap((response:Response) => response.json())
  .map((employee)=>{
    this.addCalendar(employee);
    this.listToDisplay.push(employee);
  })
  .subscribe(() => {
    this.updateCalendar();
  });

顺便说一句map运算符应该用于实际映射数据，而不是用于执行某些操作。更好的方法是：

this.http.get("apiadress...")
  .flatMap((response:Response) => response.json())
  .subscribe(() => {
    this.addCalendar(employee);
    this.listToDisplay.push(employee);

    this.updateCalendar();
  });

无法在角度2

2 个答案: