角関数の戻り値

Question

、私は次のセットアップを持っている：

API.ts：メインページTSファイル：API関数をデータに

... 
export class dataAPI { 
    info: any = null; 

    getDataFromAPI(name){ 
    this.http.get(name)... 
     .subscribe(data =>{ 
      this.info = data; //This will have returned data 
     } 
    } 
} 

Main.tsを取得しますAPI関数を使用する場合

import { dataAPI } from '../API.ts'; 

    @Component({ 
    templateUrl: 'main_page.html' 
    }) 

    export class mainPage{  
     returnedData: any; 

     constructor(public myAPI: dataAPI){}; 

     ngOnInit(){ 
      this.returnedData = this.myAPI.getDataFromAPI('steve'); //???? 
     }   
    } 

main_page.html ：API.tsファイルからAPI関数から返されたデータを表示する必要が

<div class="main" *ngIf="returnedData"> 
    {{returnedData}} 
</div> 

質問

、this.infoは何とかmain.tsに渡す必要があります。これはどうすればいいですか？どんな助けでも大歓迎です！ここで開始

Answer 1

オプション1

あなたは、このニーズを満たすために調整することができますこのように

getDataFromAPI(name){ 
    //do not subscribe in this service! Return the observable. 
    return this.http.get(name)... 

    } 

mainPage

export class mainPage{  
     returnedData: any; 

     constructor(public myAPI: dataAPI){}; 

     ngOnInit(){ 
     this.myAPI.getDataFromAPI('steve') 
      .subscribe(data=>{ 
      this.returnedData = data; //SUBSCRIBE HERE 
      }); 
     }   
    } 

オプションオプション1と2 ほぼ同じですが、この

export class mainPage{  
     returnedData$ : Observable<any>; 

     constructor(public myAPI: dataAPI){}; 

     ngOnInit(){ 
     this.returnedData$ = this.myAPI.getDataFromAPI('steve'); 
     }   
    } 

好きで、あなたのテンプレートに非同期パイプを使用して

<div class="main"> 
    {{ returnedData$ | async)}} 
</div> 

オプション3 ここに別のオプションと何か私はないだろうお勧めします。サービスをパブリックと宣言しているので、このようなテンプレートでもサービスをそのまま使用することができます。

<div class="main" *ngIf="myAPI.info"> 
    {{returnedData$ | async}} 
</div> 

とあなたのサービスでパブリックとしてごinfoを宣言します。

Answer 2

は役に立つかもしれ：https://angular.io/guide/http

注アンギュラドキュメント内のサンプル・コードはまだHTTP呼び出しのためのサービスを使用しての「ベストプラクティス」を示していないこと。しかし、httpがどのように動作し、あなたのコードにobservableを返すかを説明しています。

ここでは、製品を返すサービスの例を示します。

import { Injectable } from '@angular/core'; 
import { HttpClient, HttpErrorResponse } from '@angular/common/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/observable/throw'; 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/operator/do'; 

import { IProduct } from './product'; 

@Injectable() 
export class ProductService { 
    private _productUrl = './api/products/products.json'; 

    constructor(private _http: HttpClient) { } 

    getProducts(): Observable<IProduct[]> { 
     return this._http.get<IProduct[]>(this._productUrl) 
      .do(data => console.log('All: ' + JSON.stringify(data))) 
      .catch(this.handleError); 
    } 

    private handleError(err: HttpErrorResponse) { 
     // in a real world app, we may send the server to some remote logging infrastructure 
     // instead of just logging it to the console 
     let errorMessage = `Server returned code: ${err.status}, error message is: ${err.message}`; 
     console.error(errorMessage); 
     return Observable.throw(errorMessage); 
    } 
} 

そして、ここでは、データを受信し、サービスを呼び出してコンポーネントのコードは次のとおりです：私は何かをするだろう

import { Component, OnInit } from '@angular/core'; 

import { IProduct } from './product'; 
import { ProductService } from './product.service'; 

@Component({ 
    templateUrl: './product-list.component.html' 
}) 
export class ProductListComponent implements OnInit { 
    products: IProduct[] = []; 
    errorMessage = ''; 

    constructor(private _productService: ProductService) { 

    } 

    ngOnInit(): void { 
     this._productService.getProducts() 
       .subscribe(products => this.products = products;, 
          error => this.errorMessage = <any>error); 
    } 
}