2017-02-10 12 views
0

Asp.net Web APIプロジェクトを作成しました。
私はそれがイオンフレームワークがasp.net Web APIからデータを取得する方法

<ArrayOfquoteMain> 

<quoteMain> 
<despt>Hello , data 1</despt> 
<id>1</id> 
<reference>Hello data 1</reference> 
</quoteMain> 

<quoteMain> 
<despt>Hello , data 2</despt> 
<id>2</id> 
<reference>Hello data 2</reference> 
</quoteMain> 

<quoteMain> 
<despt>Hello , data 3</despt> 
<id>3</id> 
<reference>Hello data 3</reference> 
</quoteMain> 

</ArrayOfquoteMain> 

を返しhttp://localhost:55858/api/myData
をブラウズすると、私はちょうど私のイオンアプリでリストとして、このデータを表示したいです。
ionic start ionic2-http blank --v2を使用してイオニアアプリを作成しました。
しかし、私はどのように私のasp.net Web APIで使用するのか分かりません。

答えて

-1

No 'Access-Control-Allow-Origin'...はエラーですか?もしそうなら、イオンプロジェクトでCORSを処理する必要があります。

CORSは、ionic serveを実行しているときに私たちのアプリケーションを実行またはテストしている場合にのみ問題になります。

{ 
    "name": "myionicproj", 
    "app_id": "", 
    "v2": true, 
    "typescript": true, 
    "proxies": [ 
    { 
     "path": "/api", 
     "proxyUrl": "http://localhost:55858/api" 
    } 
    ] 
} 

プロキシURLをローカルで実行している.NETのWeb APIのURLである:あなたのイオンのプロジェクトでこれを有効proxiesタグが含まれるようにionic.config.jsonを変更するには

。環境URLに置き換えることができます。

は、あなたのtypescriptですクラスではconsole.logで結果を表示するには:

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

import {Http} from "@angular/http"; 
import 'rxjs/add/operator/map'; 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 

    constructor(public http: Http) { 

    this.http.get('http://localhost:8100/api/myData').map(res => res.json()).subscribe(data => { 
     console.log(data); 
    }); 
    } 

} 

http://localhost:8100あなたイオンlocalhostです。あなたのローカルイオンサーバ経由で.net web api http://localhost:55858/apiエンドポイントをプロキシします。http://localhost:8100/api

+0

上記のコードはデモ用です。ベストプラクティスのためには、注入する必要があるサービスを作成する必要があります。 – alltej

関連する問題