angular2/typescriptでデータを取得する

Question

私はangular2とtypescriptに問題があります。 データjsonpを取得しようとしましたが、戻り関数はobservableです。オブジェクトの結果が必要です。私は助けが必要です。

enter image description here

Accounts.ts

import { Component} from '@angular/core'; 
import { NavController, NavParams } from 'ionic-angular'; 
import {AccountService} from '../../providers/account-service'; 
import { Observable } from 'rxjs/Rx'; 


@Component({ 
    selector: 'page-account', 
    templateUrl: 'account.html', 
    providers: [AccountService] 
}) 
export class AccountPage { 

    data: any; 
    listAccounts: any; 
    accounts: any; 


    constructor(public navCtrl: NavController, public navParams: NavParams, private AccountService: AccountService) { 
     this.accounts = this.getAccountsResult();  

    } 

    getAccountsResult() { 
     return this.AccountService.retrieveAccounts(); 
    } 

    getAccountsResultDebug() { 
     console.log(this.AccountService.retrieveAccounts()); 
    } 

} 

アカウント-service.tsあなたがに加入する必要が

import { Injectable } from '@angular/core'; 
import { Headers, Http, RequestOptions, Jsonp } from '@angular/http'; 
import 'rxjs/Rx'; 


/* 
    Generated class for the AccountService provider. 

    See https://angular.io/docs/ts/latest/guide/dependency-injection.html 
    for more info on providers and Angular 2 DI. 
*/ 
@Injectable() 
export class AccountService { 

    /** 
    * Variaveis globais 
    **/ 

    data: Array<AccountService>; 
    token: string; 
    url: string; 
    param: string; 
    result: any; 


    constructor(private http: Http, private jsonp: Jsonp) { 
     this.http = http; 
     this.jsonp = jsonp; 
     this.token = 'tokenofapp' 
     this.url = 'urlofapp' 

    } 


    /** 
    * PROGRAMADOR:  Débora Gonçalves 
    * DATA:   23/01/2017 
    * OBJETIVO:  Recuperando dados da API accounts 
    **/ 

    retrieveAccounts() { 

     // variavel para enviar os headers 
     let headers = new Headers(); 

     //definindo valores no array headers 
     headers.append('x-access-key', this.token); 
     headers.append('Content-Type', 'application/jsonp'); 

     // definindo o requestoptions com os parametros do headers 
     let options = new RequestOptions({ 

      headers: headers 

     }); 

     //executando requisição da url 
     //return this.jsonp.get(this.url, options).map(res => res.json()); 
     // .subscribe(
     // data => this.result = [data] 
     //); 


     return this.jsonp.get(this.url, options).map(res => res.json()); 

    } 

} 

accountpage

<ion-header> 
    <ion-navbar> 
    <button ion-button menuToggle> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title>Contas</ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content> 
    <ion-list> 
     <button ion-item outline *ngFor="let i of accounts.result" (click)="openPage($event, 1, DetailsAccountPage)"> 
      <p>a</p>{{i}} 
      <p *ngFor="let f of i" strong>Nome do fulano {{f}}</p> 
     </button> 
     <button ion-item outline> 

      <p strong>Nome do fulano</p> 
      <div class="item-note" item-right> 

      </div> 
     </button> 

     <button ion-item outline (click)="getAccountsResultDebug()"> 

      <p strong>Nome do fulano</p> 
      <div class="item-note" item-right> 

      </div> 
     </button> 
    </ion-list> 
</ion-content> 

Answer 1

あなたのcomponent.tsの角度2サービスが

が、これはuがウルサービスを呼び出すどこでもあなたのcomponent.ts にする必要があります https://scotch.io/tutorials/angular-2-http-requests-with-observables

に従ってください。 .subscribe（ data => this.result = [data] ）;