web-dev-qa-db-ja.com

Typescript / Angular2：ObservableとJSONPとのインターフェースにJSONをキャストします

作成したインターフェースにjson-arrayをキャストし、ブラウザーに表示したいと思います。インターフェイスに何か問題があると思いますが、理解できません...コードを実行するには何を変更する必要がありますか？

インターフェース：

 export interface Video {
  id: number;
  name: string;
  description: string;
  createdAt: string;
}

app.ts

import {JSONP_PROVIDERS, Jsonp} from '@angular/http';
import {Observable} from '../../../node_modules/rxjs';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/share';
import {Video} from './networking/api';

    private videoData: Observable<Video[]>;
    ngOnInit() {
                this.displayNewstVideo(10);
            }

            private displayNewstVideo(count: number) {
                this.videoData = this.jsonp
                .get('localhost:8080/video/newst/' + count + '?jsonp=JSONP_CALLBACK')
                .map(res => (res.json() as Video[]));
                alert(this.videoData.count);
            }

app.html

<div class="container">
  <div class="video" style="font-family:sans-serif" *ngFor="#entry of videoData | async;  #i = index">
      <br *ngIf="i > 0" />
      <span class="title" style="font-size:1.2rem">
        <span>{{i + 1}}. </span>
        <a href={{entry.urlDesktop}}>{{entry.name}}</a>
      </span>
      <span> ({{entry.description}})</span>
      <div>Submitted at {{entry.createdAt * 1000 | date:"mediumTime"}}.</div>
    </div>

[〜＃〜] json [〜＃〜]

[{
id: 1,
name: "Some Name",
description: "BlaBla",
createdAt: "2016-05-04 13:30:01.0",
},
{
id: 2,
name: "Some Name",
description: "BlaBla",
createdAt: "2016-05-04 13:30:01.0",
}]

編集

  1. chromeのネットワークタブでリクエストが正しいかどうかを確認しましたが、例外として機能しています：200OK->応答も正常ではありません
  2. ティエリーが述べたようにコードを編集しましたが、ついに配列の最初のオブジェクトが表示されました:-) !!しかし、次のエラーが発生します。

キャッチされない例外：app/html/app.html：27：11のエラー元の例外：RangeError：指定された日付が有効な範囲内にありません。元のスタックトレース：RangeError：指定された日付が有効な範囲内にありません。 atboundformat（native）at Function.DateFormatter.format（ http：// localhost：3000/node_modules/@ angular/common/src /facade/intl.js:100:26 ）DatePipe.transform（ http：// localhost：3000/node_modules/@ angular/common/src/pipes/date_pipe.js：25：37 ）at DebugAppView._View_AppComponent1.detectChangesInternal（AppComponent.template）（ http：// localhost：3000/node_modules/@ angular/core/src/linker/view_utils.js：188：22 ） .js：377：148）DebugAppView.AppView.detectChanges（ http：// localhost：3000/node_modules/@ angular/core/src/linker/view.js：200：14 ）at DebugAppView .detectChanges（ http：// localhost：3000/node_modules/@ angular/core/src/linker/view.js：289：44 ）at DebugAppView.AppView.detectContentChildrenChanges（ http： //localhost:3000/node_modules/@angular/core/src/linker/view.js:215:37 ）at DebugAppView._View_AppComponent0.detectChangesInternal（AppComponent.template.js：198：8）atDebugAppView.AppView。 detectChanges（ http：// localhost：3000/node_mod ules /@angular/core/src/linker/view.js:200:14 ）エラーコンテキスト：[オブジェクトオブジェクト]

typescriptangularjsonprxjsobservable
7
safari

代わりに、次のことを試すことができます。

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

編集

あなたのリクエストは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);
5
Thierry Templier

インターフェイスの代わりにクラスを使用してみてください。この場合、video.model.tsは次のようになります。

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

最近、TypeScriptのプレゼンテーションをしましたが、これはスライドのタイトル「インターフェイスがありません！」を思い出させてくれました。 TypeScriptで、interfaceを定義すると、実際には何もコンパイルされません。これは多少誤解を招く可能性があります。私はあなたがやろうとしていることを理解していると思います：

問題は、[〜＃〜] jsonp [〜＃〜]オブジェクトが戻ってくる方法であり、パディングされます。したがって、インデックスにあります[1]。代わりにこれを試してください：

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