将四方 API 与 Angular 结合使用

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'));
  }
}

这个 return 是一个我不知道如何使用的 Observable inside console，我更希望它成为 return 一个满足条件的 JSON 对象数组。我正在尝试按照相关文档进行操作，但不知道下一步该做什么。

Answer 1

使用订阅：

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

Answer 2

是的，Http class returns 的 get 方法是可观察的。您可以明确订阅它并在您的模板中使用结果：

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');
  }
}

这个答案可以给你更多的提示：。

希望对你有帮助，蒂埃里

将四方 API 与 Angular 结合使用

Using foursquare API with Angular

angular

api

foursquare