2017-02-10 65 views
0

我已經創建了Asp.net Web API項目。
當我瀏覽http://localhost:55858/api/myData
返回離子框架如何從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> 

我只是想表明這個數據在我的應用程序離子列表。
我使用ionic start ionic2-http blank --v2創建了Ionic應用程序。
但我不知道如何使用我的asp.net web API。

回答

-1

您收到的錯誤是No 'Access-Control-Allow-Origin'...?如果是這樣,你需要在你的離子項目中處理CORS。

當運行ionic serve運行或測試我們的應用程序時,CORS只是一個問題。

要在離子項目實現這一目標,修改ionic.config.json以包括proxies標籤:

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

代理網址是在本地運行的.NET網頁API的URL。您可以將其替換爲您的環境網址。

要查看的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是你的本地主機離子。它通過您當地的離子服務器代理.net web api http://localhost:55858/api終點http://localhost:8100/api

+0

上面的代碼用於演示目的。爲了最佳實踐,您必須創建一個服務,您必須注入。 – alltej