角度の2機能はAPI

Question

からの戻りデータの前に、私が仕事を継続し、APIから取得したデータを待っていない機能アンギュラ2に問題があり続けます。

HTTPHelperクラス

import { Http, Response, Headers, RequestOptions } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/Rx'; 
import { ReturnResultViewModel } from './ReturnResultViewModel'; 

export class HttpHelpers { 

    _result: any = null; 
    _errormsg: any = null; 
    _returnResultViewModel: ReturnResultViewModel;  

    constructor(private http: Http) { 
     this._returnResultViewModel = new ReturnResultViewModel();  
    } 

    postaction(param: any, path: string) {  
     let body = JSON.stringify(param); 
     let headers = new Headers({ 'Content-Type': 'application/json' }); 
     let options = new RequestOptions({ headers: headers }); 

     return this.http.post(path, body, options) 
      .map((m:Response) => m.json())  
    } 
} 

HomeUserServiceクラス

import 'rxjs/add/operator/map'; 
import { HttpHelpers } from '../../../HttpHelpers'; 
import { usersHome } from "././Home.users.ViewModel"; 
import { ReturnResultViewModel } from "../../../ReturnResultViewModel"; 

import { Observable } from 'rxjs/Observable'; 
import 'rxjs/Rx'; 
Injectable() 


export class HomeUsersService extends HttpHelpers {  
    private _UrlLogin: string = "Accounts/getAllUsers"; 

    constructor(@Inject(Http) private _http: Http) { 
     super(_http);  
    } 
    private _usersHome: usersHome[]; 
    getAllUsers(): usersHome[]{ 

     alert(2); 
     this.postaction(null, this._UrlLogin) 
      .subscribe(result => 
       this._returnResultViewModel = result); 


     if (this._returnResultViewModel == null) 
     { 
      alert("NULL"); 
      return null; 
     } 
     else { 
      alert("Has DATA"); 
      this._usersHome = this._returnResultViewModel.result; 
      alert(this._usersHome.length) 
      return this._usersHome; 
     } 



    } 
} 

HomeUserComponentクラス

export class HomeUserComponent implements OnInit{ 

    _usersHome: [usersHome]; 
    constructor(private _homeUsersService: HomeUsersService, private _router: Router) {} 

    ngOnInit() { 
     alert(1); 
     var x = this._homeUsersService.getAllUsers(); 
    } 
} 

Answer 1

あなたは必要でない限り、あなたのサービスでsubscribeを呼び出さないようにする必要があります。あなたのサービスはすべての論理操作を行い、あなたのコンポーネントにはsubscribeを実行してください。

あなたのサービスで

、あなたの.subscribe.mapには変更：

export class HomeUsersService extends HttpHelpers { 
    private _UrlLogin: string = "Accounts/getAllUsers"; 

    constructor(@Inject(Http) private _http: Http) { 
     super(_http); 
    } 

    private _usersHome: usersHome[]; 

    getAllUsers(): usersHome[] { 

     alert(2); 
     this.postaction(null, this._UrlLogin) 
      .map(result => { 
       if (result === null) { 
        alert("NULL"); 
        return null; 
       } else { 
        alert("HAS DATA"); 
        this._usersHome = result.result; 
        alert(this._usersHome.length); 
        return this._usersHome; 
       } 
      }); 
    } 
} 

今、あなたのサービスが正しくマッピング観測を返すために、あなたはあなたのコンポーネントに残りの部分を処理することができます：

export class HomeUserComponent implements OnInit { 

    _usersHome: [usersHome]; 

    constructor(private _homeUsersService: HomeUsersService, private _router: Router) { 
    } 

    ngOnInit() { 
     alert(1); 
     this._homeUsersService.getAllUsers() 
      .subscribe(users => { 
       //do something to your users. 
       let x = users; 
      }); 
    } 
} 

Answer 2

.subscribe()内のコードは、非同期です。これはすぐに実行されないことを意味しますが、後で実行されます。あなたは、非同期ビットの実行に依存したコードxをお持ちの場合

、あなたはx.subscribe()内部の部品自体のかは、コールバックや約束のように、他のメカニズムを使用することを配置する必要があります。

試行次のように：

getAllUsers(): usersHome[]{ 

    alert(2); 
    this.postaction(null, this._UrlLogin) 
     .subscribe((result) => {     // changed here 

      this._returnResultViewModel = result; // changed here 


    if (this._returnResultViewModel == null) 
    { 
     alert("NULL"); 
     return null; 
    } 
    else { 
     alert("Has DATA"); 
     this._usersHome = this._returnResultViewModel.result; 
     alert(this._usersHome.length) 
     return this._usersHome; 
    } 


    }            // added this 
} 

Iは.subscribe()に与えられる関数内部非同期部（this._returnResultViewModel = result;）に依存するコードを置きました。