角度2で購読した後の値が未定義ですが、テンプレートで表示される可能性があります。

Question

私のサービスから値を処理しようとすると、未定義の値が返されました。しかし、不思議なことに私がテンプレートに直接アクセスすれば、それは仕事だった。 HTMLでiは{{product_ratingを}置く場合

これは私のサービス

import { Injectable }  from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import { Observable }  from 'rxjs/Observable'; 
import {Globals} from "../globals"; 
import 'rxjs/Rx'; 
import 'rxjs/add/operator/map'; 
import {DetailprodComponent} from './detailprod.component'; 
import {Home} from '../home/home'; 
import { ActivatedRoute,Router } from '@angular/router'; 

@Injectable() 
export class DetailprodService { 
    private id:string; 
    constructor (private http: Http, private route: ActivatedRoute) { 
     this.route.params.subscribe(params => {let id = params['id'];this.id = id;}); 
    } 

    getDetail(){ 
     return this.http.get(Globals.server+'/product/'+this.id) 
        .map(res=> res.json()); 
    } 

} 

と成分である、のOnInit方法で私はそれが出力を示し、次いで

this.detailprodService.getDetail() 
     .subscribe(details => this.product_rating = details.product_rating, 
      error => this.errorMessage = <any>error); 
this.getstars(this.product_rating); 

を置きます。しかし、それをさらにコンポーネントで処理すると、定義されていない値が返されます。私は

getstars(x){ 
    alert(x) 
    if (x == 2){ 
     alert("1"); 
     this.starspath ="imagemanagement/1stars.png"; 
    }else if (x == 4){ 
     alert("2"); 
     this.starspath ="imagemanagement/2stars.png"; 
    }else if (x == 6){ 
     alert("3"); 
     this.starspath ="imagemanagement/3stars.png"; 
    }else if (x == 7){ 
     alert("4"); 
     this.starspath ="imagemanagement/4stars.png"; 
    }else if (x == 10){ 
     alert("5"); 
     this.starspath ="imagemanagement/5stars.png"; 
    } 
    } 

メソッドthis.getstars（this.product_rating）にproduct_ratingを送信されたすべての答えは非常に理解されるであろう...

Answer 1

は、以下のようにしてみてください。

this.detailprodService.getDetail() 
      .subscribe(details => { 
this.product_rating = details.product_rating; 
this.getstars(this.product_rating); 
}, error => this.errorMessage = <any>error); 

あなたにsubscribtionを待つべき値を処理します。