Typecript / Angle2: 관측 가능 & JSONP와 상호 작용하는 캐스트 JSON

Typecript / Angle2: 관측 가능 & JSONP와 상호 작용하는 캐스트 JSON

내가 만든 인터페이스에 json 어레이를 캐스팅하여 브라우저에 표시하려고 한다.내 인터페이스에 뭔가 문제가 있는 것 같은데 잘 모르겠어...코드를 실행하려면 무엇을 변경해야 하는가?

인터페이스:

 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.properties

<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>

제이슨

[{
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. 내 네트워크 탭의 크롬 요청이 올바른지 확인했는데 200 OK -> 응답도 양호하지 않다.
2. 티에리가 말한 대로 내 코드를 편집했고 이제 드디어 내 배열의 첫 번째 물체를 보여주고 있다 :-)!!하지만 나는 지금 다음과 같은 오류를 발견한다.

검색되지 않은 예외: app/html/app.html의 오류:27:11 원본 예외: RangeError: 제공된 날짜가 유효한 범위에 있지 않음원본 스택트레이스: RangeError: 제공된 날짜가 유효한 범위에 있지 않음.함수의 바운드 형식(원본)DateFormatter.format (http://localhost:3000/node_modules/@angular/common/src/facade/intl.js:100:26) at DatePipe.transform (http://localhost:3000/node_modules/@angular/common/src/pipes/date_pipe.js:25:37) at eval (http://localhost:3000/node_modules/@angular/core/src/linker/view_utils.js:188:22) at DebugAppView._View_AppComponent1.detectChangesDebugAppView의 내부(AppComponent.template.js:377:148)앱뷰.DebugAppView에서 detectChanges(http://localhost:3000/node_modules/@angular/core/src/linker/view.js:200:14)DebugAppView에서 detectChanges(http://localhost:3000/node_modules/@angular/core/src/linker/view.js:289:44)를 검색하십시오.앱뷰.DetectContentChildrenChanges(http:///localhost:3000/node_modules/@angular/core/src/linker/view.js:215:37)를 DebugAppView에서 검색._View_AppComponent0.detectChangesDebugAppView의 내부(AppComponent.template.js:198:8)앱뷰.detectChanges(http://localhost:3000/node_modules/@angular/core/src/linker/view.js:200:14) ERROR 컨텍스트: [객체]

대신 다음을 시도해 보십시오.

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

이 경우 video.model.ts가 다음과 같이 되도록 인터페이스 대신 클래스를 사용해 보십시오.

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

최근에 TypeScript를 발표했는데, 이것은 "인터페이스가 없다!"라는 슬라이드의 제목을 떠올리게 했다.정의 시 TypeScript에서interface그것은 실제로 아무것도 아닌 것으로 압축된다.그건 다소 오해의 소지가 있다.네가 뭘 하려는지 알 것 같아.

문제는 JSONP 물체가 다시 돌아오는 방식이야, 패딩이 되어 있어.그래서 그것은 인덱스에 위치한다.[1]대신 다음과 같이 하십시오.

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

참조URL: https://stackoverflow.com/questions/37212948/typescript-angular2-cast-json-to-interface-with-observable-jsonp