javascript - 使用 angular2/typescript 获取数据

Question

我对 Angular2 和 TypeScript 有疑问。我尝试获取数据 jsonp，但返回函数是可观察的，我需要 de 对象结果。我需要帮助。

enter image description here

帐户.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());
    }  

}

账户服务.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());

    }

}

账户页面

<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 中订阅 Angular 2 服务

关注 https://scotch.io/tutorials/angular-2-http-requests-with-observables

这需要位于您的 component.ts 中无论您在哪里调用您的服务。。订阅( 数据 => this.结果 = [数据] )；