Je joue avec Angular2 et TypeScript et ça ne se passe pas bien (ce serait si facile avec AngularJS). J'écris une petite application expérimentale pour tout comprendre et j'ai le composant suivant comme composant principal/supérieur ...
import {Component, OnInit} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {UserData} from './services/user-data/UserData';
import {Home} from './components/home/home';
import {UserStatus} from './types/types.ts';
import {Http, Headers, Response} from 'angular2/http';
@Component({
selector: 'app', // <app></app>
providers: [...FORM_PROVIDERS],
directives: [...ROUTER_DIRECTIVES],
template: require('./app.html')
})
@RouteConfig([
{path: '/', component: Home, name: 'Home'},
// more routes here....
])
export class App {
userStatus: UserStatus;
constructor(public http: Http) {
}
ngOnInit() {
// I want to obtain a user Profile as soon as the code is initialised
var headers = new Headers();
headers.append('Content-Type', 'application/json');
this.http.get('/restservice/userstatus', {headers: headers})
.subscribe(
(data: Response) => {
data = JSON.parse(data['_body']);
this.userStatus = data;
},
err => console.log(err), // error
() => console.log('getUserStatus Complete') // complete
);
}
}
Maintenant, lorsque le composant de niveau supérieur est initialisé/initialisé, je souhaite appeler un service factice REST (/ restservice/userstatus) que j’ai configuré pour retourner un objet que j’ai transformé en à partir de import {UserStatus} from './types/types.ts'
):
export class UserStatus {
constructor (
public appOS?: any , // can be null
public firstName: string,
public formerName?: any, // can be null
public fullPersId: number,
public goldUser: boolean,
public hasProfileImage: boolean,
public hideMoblieNavigationAndFooter: boolean,
public persId: string,
public profileName: string,
public profilePicture: string,
public showAds: boolean,
public siteId: number,
public url: string,
public verified: boolean
) {
}
}
Désormais, les propriétés appOS
et formerName
pourraient potentiellement être null
et, lorsqu'elles répondent à la réponse dans mon service REST, l'objet JSON ressemble à ceci:
{
appOS: null,
firstName: "Max",
formerName: null,
fullPersId: 123456789,
goldUser: true,
hasProfileImage: true,
hideMoblieNavigationAndFooter: false,
persId: "4RUDIETMD",
profileName: "Max Dietmountaindew",
profilePicture: "http://myurl.com/images/maxdietmountaindew.jpg",
showAds: true,
siteId: 1,
url: "/profile/maxdietmountaindew",
verified: true
}
Ainsi, la structure de données envoyée par mon service bidon et le type d'objet correspondent, cependant, lorsque j'essaie d'assigner les données du service de repos au composant de la classe 'this.userStatus = data;'
, l'erreur suivante s'affiche: ....
"error TS2322: Type 'Response' is not assignable to type 'UserStatus'.
Property 'appOS' is missing in type 'Response'."
Je suppose que dans ma classe Type, je suis en train de faire un problème avec la définition des valeurs NULL. Est-ce que quelqu'un peut voir ce que je fais mal ou expliquer pourquoi je reçois l'erreur? Merci d'avance.
À mon avis, il est inutile de mettre du texte sur quelque chose qui provient de la réponse http ... Les types existent uniquement au moment de la compilation, pas au moment de l'exécution ...
Au lieu de:
this.http.get('/restservice/userstatus', {headers: headers})
.subscribe(
(data: Response) => {
data = JSON.parse(data['_body']);
this.userStatus = data;
},
err => console.log(err), // error
() => console.log('getUserStatus Complete') // complete
);
Utilisez ceci:
this.http.get('/restservice/userstatus', {headers: headers})
.map((data: any) => data.json())
.subscribe(
(data: any) => {
this.userStatus = data;
},
err => console.log(err), // error
() => console.log('getUserStatus Complete') // complete
);
Ici, vous déclarez data
comme type Response
(data: Response) => { // <==
data = JSON.parse(data['_body']);
et ici vous affectez une variable de type Response
à une variable de type UserStatus
this.userStatus = data;
donc l'erreur.
Pour éviter cela, il suffit de
this.userStatus = JSON.parse(data['_body']);
Tu peux essayer
(data: Response|any) => { // <==
data = JSON.parse(data['_body']);
M'a aidé