在 Angular 中使用foursquare API

Question

我在弄清楚如何在我的 Angular 应用程序中使用 Foursquare API (search capability) 时遇到问题。

我的项目结构是这样的

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 对象数组。我正在尝试关注这方面的文档，但不知道下一步该做什么。

Answer 1

使用订阅：

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

Answer 2

是的，Http 类的 get 方法返回一个 observable。您可以明确订阅它并在模板中使用结果：

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

您还可以通过利用 async 管道让它处理 observable 更进一步。在这种情况下，您可以将 observable 设置为组件的属性：

@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?。

希望对你有帮助 蒂埃里