Typescript/Angular2:将 JSON 转换为与 Observable & 的接口JSONP [英] Typescript / Angular2: Cast JSON to interface with Observable & JSONP
问题描述
我想将我的 json-array 投射到我创建的界面并希望在浏览器中显示它.我认为我的界面可能有问题,但我无法弄清楚...我需要更改什么才能运行我的代码?
界面:
导出接口 Video {身份证号码;名称:字符串;描述:字符串;createdAt:字符串;}
app.ts
import {JSONP_PROVIDERS, Jsonp} from '@angular/http';从'../../../node_modules/rxjs'导入{Observable};导入 'rxjs/add/operator/map';导入 'rxjs/add/operator/share';从./networking/api"导入{视频};私人视频数据:Observable
app.html
<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><跨度>({{entry.description}})</span><div>提交于 {{entry.createdAt * 1000 |日期:中时间"}}.</div>
JSON
<代码>[{编号:1,name: "一些名字",描述: "BlaBla",createdAt: "2016-05-04 13:30:01.0",},{编号:2,name: "一些名字",描述: "BlaBla",createdAt: "2016-05-04 13:30:01.0",}]
编辑
- 我已经检查了 chrome 网络选项卡中的请求是否正确,并且它正常工作:200 OK --> 响应也很好
- 我按照 Thierry 所说的那样编辑了我的代码,现在它终于显示了我数组中的第一个对象:-)!!但我现在收到以下错误:
<块引用>
未捕获的异常:app/html/app.html:27:11 中的错误原始例外:范围错误:提供的日期不在有效范围内.原始堆栈跟踪:RangeError: 提供的日期不在有效范围内.boundformat(原生)在 Function.DateFormatter.format (http://本地主机: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)在 eval (http://localhost:3000/node_modules/@angular/core/src/linker/view_utils.js:188:22)在 DebugAppView._View_AppComponent1.detectChangesInternal (AppComponent.template.js:377:148)在 DebugAppView.AppView.detectChanges (http://本地主机: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)在 DebugAppView.AppView.detectContentChildrenChanges (http://本地主机:3000/node_modules/@angular/core/src/linker/view.js:215:37)在 DebugAppView._View_AppComponent0.detectChangesInternal (AppComponent.template.js:198:8)在 DebugAppView.AppView.detectChanges (http://本地主机:3000/node_modules/@angular/core/src/linker/view.js:200:14)错误上下文:[对象对象]
您可以尝试以下方法:
this.videoData = this.jsonp.get('localhost:8080/video/newst/' + 计数 +'?jsonp=JSONP_CALLBACK').map(res => <Video[]>res.json();
编辑
我认为您的请求不会返回 JSONP 内容,而是返回经典内容 (JSON).如果是这样,您可以尝试以下操作:
import { bootstrap } from 'angular2/platform/browser';从'angular2/core'导入{组件};从 'angular2/http' 导入 { HTTP_PROVIDERS, Http };导入rxjs/add/operator/map";@零件({选择器:应用程序",templateUrl: "app.html",提供者:[HTTP_PROVIDERS]})类应用{私人 feedData: Observable
I'd like to cast my json-array to my interface which I've created and like to display it in the browser. I think there is probably something wrong with my interface but I can't figure it out... What do I need to change to get my code running?
Interface:
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",
}]
Edits
- I've checked if the request is correct in my network-tab in chrome and it is working as excepted: 200 OK --> Response ist also fine
- I edited my code as Thierry stated out and now it is finally showing the first object in my array :-)!! But I get following error now:
Uncaught EXCEPTION: Error in app/html/app.html:27:11 ORIGINAL EXCEPTION: RangeError: Provided date is not in valid range. ORIGINAL STACKTRACE: RangeError: Provided date is not in valid range. at boundformat (native) at Function.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.detectChangesInternal (AppComponent.template.js:377:148) at 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) at DebugAppView.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core/src/linker/view.js:200:14) ERROR CONTEXT: [object Object]
You could try the following instead:
this.videoData = this.jsonp
.get('localhost:8080/video/newst/' + count +
'?jsonp=JSONP_CALLBACK')
.map(res => <Video[]>res.json();
Edit
I think that your request doesn't return JSONP content but classical one (JSON). If so, you could try the following:
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);
这篇关于Typescript/Angular2:将 JSON 转换为与 Observable & 的接口JSONP的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!