2017-10-26 3 views
0

データベースからフェッチされたデータを処理するのに問題があります。後でデータを使用するコンポーネントをロードするときに、そのコンポーネントを使用するために中央サービスに送信したいと思います。 私の問題は、このサービスに依存するコンポーネントを初期化するときに中央サービスがデータを受信するように見えることです。私のアプリが構成されている方法をここで イベントを購読するのは、コンポーネントがロードされたときにのみ機能します。

未定義

のプロパティを読み取ることができません「性別」:

ERRORの例外TypeError: 結果は:コンポーネント負荷が、私はこのタイプのエラーを取得し、まだときにデータの準備ができていません HTTPを処理

-aのデータ記憶サービスは、すべてのデータを格納する

-a中央サービス(この場合のオブジェクトの配列)を要求します。中央サービスからデータを取って「共有」フォルダ

-various成分(遅延ロード付き)に入れ-both

-the HTTPアプリケーションが初期化されるときに要求が送信され

ここにデータストレージサービスがあります。 httpリクエストが行われると、コンストラクタ内のイベントを介してデータを送信します。

@Injectable() 
export class DataStorageService { 
    constructor(private http:Http,private authService:AuthService){ 
     this.getStoredCatList().subscribe(
     (response:Response)=> { 
      const data = response.json(); 
      this.dataFetched.emit(data); 
     }, 
     (error:Error)=>console.log(error) 
    ); 
    } 

dataFetched = new EventEmitter<Cat[]>(); 


    getStoredCatList(){ 
     return this.http.get('https://adopt-meow.firebaseio.com/data.json'); 

    } 
} 

ここで私がイベントを購読する中央サービスがあります。角度の私の理解から、

@Injectable() 
export class CatListService implements OnInit{ 

    constructor(private dataStorageService:DataStorageService){ 
     this.dataStorageService.dataFetched.subscribe(
      (catList:Cat[])=>this.catList = catList, 
      console.log("event received by catList service")) 
     } 

、私は、すぐにイベントが発するようなメッセージ「catListサービスによって受信されたイベント」を得るべきだと思います。では、なぜコンポーネントをロードするときにだけそれを取得するのですか?

EDIT 私は、アプリの起動時に、app.component.tsでサービスをインポートすることで解決策を見つけることができました。

constructor(private dataStorageService: DataStorageService, 
    private catListService:CatListService) { } 
+0

なぜサービス用にOnInit()を使用していますか? –

+0

私は直前に間違って修正しました –

+0

あなたのサブスクリプションはアクティブになります。これは 'CatListService'が初期化されたときだけです。だから、あなたのコンポーネントがロードされると 'CatListService'自体が初期化されると思います。 –

答えて

1

Servicesを呼び出すことができますComponentまたはその他のServiceに注入されたときにのみ初期化されます。あなたのコンポーネントにCatListServiceを注入したと思います。また、CatListServiceコンストラクタ内に作成されたsubscriptionも、サービスがロードされるとアクティブになります。そのため、コンポーネントが読み込まれる前にデータを受け取っていないのです。

注:Serviceをモジュールレベルまたはコンポーネントレベルで指定すると、Serviceコンストラクタは呼び出されません。これらは、Componentまたは他のServiceコンストラクタに注入した場合にのみ呼び出されます。

0

ngOnInitは()サービスとディレクティブおよびコンポーネントではないと動作し、あなたのコンポーネント内にあなたのサービスに加入することができinitメソッドを作成し、サービスのコンストラクタ内

0

テンプレートに表示しようとするとデータがまだ読み込まれていないようです。

Uは、データを表示するパイプasyncを追加しようとする可能性があります。

<span>{{ genders | async }}</span> 

これはエラーを回避するはずです。

関連する問題