angular - 在 angular2 中订阅

Question

在我的项目中，我有一个在多个组件中使用的服务调用。有没有办法在服务中有一个单独的方法来保存数据并调用该方法来获取数据。下面的第一个方法是服务调用以获取可重用数据，第二种方法是我调用以获取该数据的方法。但每次我使用它时它都返回未定义。请帮忙!!!

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

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

  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 先生编写:): How do I return the response from an Observable/http/async call in angular2?

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

您可以使用 safe navigation operator ，即 ?

{{intiatedTravelRequestDetail?.myProperty}}

这可以保护空值。

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

里

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

除非 intiatedTravelRequestDetail 中有值，否则不会呈现该部分 View 。

希望对您有所帮助! :)