Typescript / Angular2：将JSON转换为与Observable和JSONP的接口

3 回答

• 5

  您可以尝试以下方式：

  this.videoData = this.jsonp
      .get('localhost:8080/video/newst/' + count +
                        '?jsonp=JSONP_CALLBACK')
              .map(res => <Video[]>res.json();
  

  Edit

  我认为您的请求不会返回JSONP内容，而是返回JSONP内容（JSON） . 如果是这样，您可以尝试以下方法：

  import { bootstrap }  from 'angular2/platform/browser';
  import { Component } from 'angular2/core';
  import { HTTP_PROVIDERS, Http } from 'angular2/http';
  import "rxjs/add/operator/map";
  
  @Component({
    selector: "app",
    templateUrl: "app.html",
    providers: [HTTP_PROVIDERS]
  })
  class App {
    private feedData: Observable<Video[]>;
  
    constructor(private http: Http) { }
  
    ngOnInit() {
      this.displayNewstVideo(10);
    }
  
    private displayNewstVideo(count: number) {
      this.videoData = this.http
        .get('localhost:8080/video/newst/' + count)
        .map(res => (res.json() as Video[]))
        .do(videoData => {
          console.log(videoData);
        });
    }
  }
  
  bootstrap(App);
  

  回复于 2024-05-03T23:17:51+08:00
• 1

  尝试使用类而不是接口，所以在这种情况下video.model.ts将是：

  export class Video {
    constructor(
      public id: number,
      public name: string,
      public description: string,
      public createdAt: string){}
  }
  

  回复于 2024-05-03T23:17:51+08:00
• 1

  我最近发表了一个关于 TypeScript 的演示文稿，这让我想起了幻灯片的 Headers "There is no interface!"在 TypeScript 中，当你定义一个 interface 时，它实际上编译为零 . 这可能有点误导 . 我想我明白你要做的是：

  问题是 JSONP 对象返回的方式，它是填充的 . 所以它位于索引 [1] . 试试这个：

  this.videoData = this.jsonp
      .get('localhost:8080/video/newst/' + count +
                        '?jsonp=JSONP_CALLBACK')
              .map(res => <Video[]>res.json()[1]);
  

  回复于 2024-05-03T23:17:51+08:00