Question

在我的项目中，我有一个服务调用，我在多个组件中使用。有没有办法在服务中有一个单独的方法来保存数据并调用该方法来获取数据。下面的第一个方法是服务调用以获取可重用的数据，第二种方法是我调用以获取该数据的方法。但是每次使用它都会返回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先生写的:)： How do I return the response from an Observable/http/async call in angular2?

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

您可以使用safe navigation operator，即?

{{intiatedTravelRequestDetail?.myProperty}}

这可以保护空值。

你也可以将它包装在*ngIf

中

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

除非intiatedTravelRequestDetail中有值，否则不会呈现视图的那一部分。

希望这有帮助！：）

订阅angular2

1 个答案: