在 angular2 中订阅

Question

在我的项目中，我有一个在多个 components.Is 中使用的服务调用下面的第一种方法是获取可重用数据的服务调用，第二种方法是我每次使用 it.Help 时调用它来获取 data.But 它 returns undefined 的方法！！！

 GetUserRoles(): Observable<LoggedInUserDetails> {
    return this.http.get(BaseUrl + GetUserRole).map((res: Response) => {
      var data = res.json();
      this.loggedInUser = data;
      return this.loggedInUser;
    }) 
  }



 getUserDetails() {
    return this.loggedInUser;
  }

使用上述方法的组件

export class IntiatedTravelSummaryComponent implements OnInit {
  public loggedInUser: LoggedInUserDetails;
  public id:number
  intiatedTravelRequestDetail: TravelReqForm;
  test:TravelReqForm[];
  test2:TravelReqForm[];
  constructor(private neuTravelService: NeuTravelService,private route:ActivatedRoute) {
   this.id =route.snapshot.params['TravellerId'];
   }

  ngOnInit() {
    this.loggedInUser =this.neuTravelService.getUserDetails();
      this.neuTravelService.GetIntiatedTravelDetails(this.loggedInUser).subscribe(data =>{ this.test = data;
  this.intiatedTravelRequestDetail= this.neuTravelService.getTravelSummaryDetails(this.id,this.test);
   console.log(this.intiatedTravelRequestDetail);
       });
     }
}

更新* 或者如果有人能告诉我如何将数据同步传递给视图。即 this.intiatedTravelRequestDetail 在服务调用中显示一个值，但在调用后显示未定义。如果有人能告诉我如何在加载数据后呈现视图

  ngOnInit() {
        this.neuTravelService.GetUserRoles().subscribe(data => {
          this.loggedInUser = data;
          this.neuTravelService.GetIntiatedTravelDetails(this.loggedInUser).subscribe(data =>{ this.test = data;
      this.intiatedTravelRequestDetail= this.neuTravelService.getTravelSummaryDetails(this.id,this.test);
       console.log(this.intiatedTravelRequestDetail);
           });
        });
        console.log(this.intiatedTravelRequestDetail);

         }
    }

Answer 1

正如您注意到 intiatedTravelRequestDetail 在回调之外未定义，这里有一个很好的答案，由我们的好先生@echonax 先生撰写:)：

此异步事件还导致在检索数据之前呈现视图。由于您没有提供模板示例，我猜 this.intiatedTravelRequestDetail 是一个对象，您希望显示此对象的属性。

您可以使用 safe navigation operator，即 ?

{{intiatedTravelRequestDetail?.myProperty}}

这可以保护空值。

你也可以把它包在一个*ngIf

里面

<div *ngIf="intiatedTravelRequestDetail">
  {{intiatedTravelRequestDetail.myProperty}}
</div>

除非 intiatedTravelRequestDetail.

中有值，否则不会呈现视图的那部分

希望对您有所帮助！ :)

在 angular2 中订阅

Subscribe in angular2

angular

http

angular2-services