使用四角api角2 2

我有問題搞清楚如何在我的角2應用程序中使用foursquare api (search capability)。使用四角api角2 2

我的項目結構看起來像這樣

app 
    components 
    app.ts 
    search.ts 
    services 
    foursquare.ts 
    typings 
    boot.ts 
index.html

foursquare.ts看起來像這樣

import {Injectable, Inject} from 'angular2/core'; 
import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from 'angular2/http'; 

import 'rxjs/add/operator/map'; 

const CLIENT_ID = 'My client id'; 
const SECRET = 'My secret'; 
const URL : string = 'https://api.foursquare.com/v2/venues/search?client_id='+CLIENT_ID+'&client_secret='+SECRET+'&v=20130815'; 

@Injectable() 
export class FoursquareService { 

constructor(public http:Http) { 
    this.http = http; 
} 

foursquareGet(data) { 
    return this.http.get(URL+data).map(res => res.json()); 
} 
}

而且我想在接下來的方式

內 search.ts使用

import {Component} from 'angular2/core'; 
import {FoursquareService} from '../../services/foursquare' 

@Component({ 
    templateUrl : 'app/components/new-listing/new-listing.html', 
    providers : [FoursquareService] 
}) 

export class NewListingComponent { 
    constructor(service : FoursquareService) { 
    console.log(service.foursquareGet('&ll=40.7,-74&query=sushi')); 
    } 
}

這會返回控制檯內的Observable，我不知道如何使用，並且希望它返回符合條件的json對象數組。我試圖按照這方面的文檔，但不知道接下來要做什麼。

來源

2016-01-13 Ilja

是的，get mezthod的Http類返回一個可觀察的。你可以明確地訂閱它，你的模板中使用結果：

export class NewListingComponent { 
    constructor(service : FoursquareService) { 
    service.foursquareGet('&ll=40.7,-74&query=sushi') 
     .subscribe(data => { 
     this.result = data; 
     }); 
    } 
}

您還可以通過利用async管，讓它處理的可觀察走得更遠。在這種情況下，您可以設置觀察爲您的組件的屬性：

@Component({ 
    template: ` 
    <ul> 
     <li *ngFor="#elt of result | async">{{elt.something}}</li> 
    </ul> 
    ` 
}) 
export class NewListingComponent { 
    constructor(service : FoursquareService) { 
    this.result = service.foursquareGet('&ll=40.7,-74&query=sushi'); 
    } 
}

這個答案可以給你更多的提示在此：How to Consume Http Component efficiently in a service in angular 2 beta?。

希望它可以幫助你，蒂埃裏

來源

2016-01-13 12:21:34

哪裏可以正確定義結果變量？ – Ilja

既然你想在你的組件中使用它，它必須是它的一部分。我的意思是一個類屬性。它隱含在我提供的代碼中。但是你可以明確地定義它：'result：ResultClass [];'直接在'export class NewListingComponent'行的下面。 –

我明白了，在最後一個問題中，我假設需要爲RequestClass添加一個導入？ – Ilja

使用訂閱：

service.foursquareGet('&ll=40.7,-74&query=sushi').subscribe(data=> this.data=data);

來源

2016-01-13 12:18:21 pixelbits

引發數據錯誤（在類型NewListingComponent不存在） – Ilja

定義數據作爲成員變量，或做其他事吧。 – pixelbits

使用四角api角2 2

回答

相關問題