Question

我想将我的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",
}]

编辑

我已经检查了我的网络标签中的请求是否正确，并且它的工作情况如下：200 OK - ＆gt;回复也很好
我按照Thierry的说法编辑了我的代码，现在它终于显示了我的数组中的第一个对象:-) !!但我现在得到以下错误：

未捕获的EXCEPTION：app / html / app.html：27：11出错 ORIGINAL EXCEPTION：RangeError：提供的日期不在有效范围内。原装STACKTRACE： RangeError：提供的日期不在有效范围内。在 boundformat （原生）在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）在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://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）在DebugAppView.AppView.detectContentChildrenChanges（http://localhost:3000/node_modules/@angular/core/src/linker/view.js:215:37）在DebugAppView._View_AppComponent0.detectChangesInternal（AppComponent.template.js：198：8）在DebugAppView.AppView.detectChanges（http://localhost:3000/node_modules/@angular/core/src/linker/view.js:200:14）错误背景： [object Object]

Answer 1

您可以尝试以下方式：

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

修改

我认为您的请求不会返回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);

Answer 2

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

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

Answer 3

我最近介绍了 TypeScript ，这让我想起幻灯片的标题是什么“没有界面！”在定义interface时，在 TypeScript 中，它实际上会编译为空。这可能有点误导。我想我明白你要做的是什么：

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

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

Typescript / Angular2：将JSON转换为与Observable＆amp;的接口。 JSONP

3 个答案: