在Angular 2中从服务中获取数据

Question

So I created a component where it handles products.

ngOnInit(){
   this.products = [];
   this.products = this.product.all();
}

In my services class I am retrieving the products in the constructor and retrieving it through the all method.

constructor(private http: Http, private admin: AdminService){
   admin.getProduct(function(response){
     this.products = response.data;
   }.bind(this));
}

all(): any{
   return this.products;
}

This issue with this is that the all method is run before the products arrive. Is there anyway I can get the service class to load the products and be able to retrieve the products back in my component?

Answer 1

Here's a suggestion using RxJS:

productsChange = new Subject();                   // added this line
constructor(private http: Http, private admin: AdminService){
   admin.getProduct(function(response){
     this.productsChange.next(response.data);     // changed this line
   }.bind(this));
}

all(): Observable<any> {                          // changed the return type
   return this.productsChange;                    // changed this line
}

And the component:

ngOnInit(){
   this.products = [];
   this.product.all().subscribe((products) => {   // changed this line
       this.products = products;                  // added this line
   });                                            // added this line
}