Tapuscrit / Angular2: Fonte JSON à l'interface avec les Observables & JSONP
Je tiens à exprimer mon json-réseau pour mon interface, j'ai créé et, comme pour l'afficher dans le navigateur. Je pense qu'il y a probablement quelque chose de mal avec mon interface, mais je ne peux pas la comprendre... de Quoi ai-je besoin de changer pour obtenir mon code en cours d'exécution?
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",
}]
Modifications
- J'ai vérifié si la demande est correct dans mon réseau-onglet dans chrome, et qu'elle fonctionne correctement: 200 OK --> Réponse ist aussi fine
- J'ai édité mon code que Thierry a déclaré et maintenant, il est enfin en montrant le premier objet de mon tableau :-)!! Mais j'obtiens l'erreur suivante aujourd'hui:
Uncaught EXCEPTION: Erreur dans app/html/app.html:27:11
EXCEPTION d'ORIGINE: RangeError: date Fournie n'est pas dans la plage valide.
ORIGINAL STACKTRACE:
RangeError: date Fournie n'est pas dans la plage valide.
au boundformat (native)
à une Fonction.DateFormatter.format (http://localhost:3000/node_modules/@angular/common/src/facade/intl.js:100:26)
au DatePipe.transformer (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)
au DebugAppView._View_AppComponent1.detectChangesInternal (AppComponent.de modèle.js:377:148)
au DebugAppView.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core/src/linker/view.js:200:14)
au DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core/src/linker/view.js:289:44)
au DebugAppView.AppView.detectContentChildrenChanges (http://localhost:3000/node_modules/@angular/core/src/linker/view.js:215:37)
au DebugAppView._View_AppComponent0.detectChangesInternal (AppComponent.de modèle.js:198:8)
au DebugAppView.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core/src/linker/view.js:200:14)
ERREUR DE CONTEXTE:
[object object]
OriginalL'auteur safari | 2016-05-13
Vous devez vous connecter pour publier un commentaire.
Vous pouvez essayer ce qui suit:
Modifier
Je pense que votre demande n'a pas de retour JSONP contenu mais classique (JSON). Si oui, vous pouvez essayer ce qui suit:
Que voulez-vous dire exactement par cela ne fonctionne pas? 😉 Avez-vous une erreur? En outre, votre alerte doit être déplacé dans une ne opérateur... Dans votre cas, sont là quand il est exécuté.
J'aimerais analyser mon json dans mon interface et je voudrais montrer le contenu de mon interface dans mon code html. Mais je ne suis pas un compilateur-des erreurs ou quelque chose. Enfait je suis un nouveau de la Machine et Angular2.
En fait, res.json() va analyser le contenu JSON. Les Interfaces sont seulement au moment de la conception pour la vérification de type. Ils ne sont pas utilisés au moment de l'exécution. Avez-vous vos données?
Que comprenez-vous de pentecôte affiche? Mon code html conserve vide dans mon navigateur, aucun contenu n'est montré. Btw, j'ai eu l'idée de le faire comme ce à partir d'ici: github.com/Microsoft/typescript-build2016-demos/tree/master/...
OriginalL'auteur Thierry Templier
Essayez d'utiliser une classe au lieu d'une interface, donc dans ce cas la vidéo.de modèle.ts serait:
OriginalL'auteur wolfhoundjesse
J'ai donné une présentation de Tapuscrit récemment, cela m'a rappelé ce que de la diapositive titres "Il n'y a pas d'interface!" Dans Tapuscrit lorsque vous définissez une
interface
, il compile vers le bas pour rien. Ce qui peut être trompeur. Je crois que je comprends ce que vous essayez de faire:La question est la façon dont le JSONP objet revient, il est rembourré. De sorte qu'il se trouve dans l'index
[1]
. Essayez plutôt ceci:OriginalL'auteur David Pine