web-dev-qa-db-fra.com

Angular 4 - Http to HttpClient - La propriété 'une propriété' n'existe pas sur le type Object

J'essaie de changer une application existante en utilisant Http en utilisant HttpClient, mais j'ai une erreur.

Donc, dans mon service maintenant, vous pouvez voir le nouveau code par rapport à l'ancien qui a été commenté:

constructor(
        // private http: Http
        private http: HttpClient
    ) { }

    getSidebar() {
        // return this.http.get('http://localhost:3000/sidebar/edit-sidebar')
        //     .map(res => res.json());
        return this.http.get('http://localhost:3000/sidebar/edit-sidebar');
    }

Et dans mon page.component.ts j'ai ceci

this.sidebarService.getSidebar().subscribe(sidebar => {
                        this.sidebar = sidebar.content; // this does not work now
                    });

Cependant pour la ligne au-dessus de laquelle j'ai commenté, j'obtiens cette erreur maintenant:

Property 'content'
 does not exist on type 'Object'.

Cependant, si je _console.log(sidebar) j'obtiens ce qui suit:

{_id: "59dde326c7590a27a033fdec", content: "<h1>sidebar here</h1>"}

Alors, quel est le problème?

Encore une fois, Http fonctionne mais HttpClient ne fonctionne pas.

angulartypescript
7
Vojislav Kovacevic

Vous pouvez spécifier le type renvoyé à l'aide d'une interface, d'une classe, etc. Par exemple, vous pouvez utiliser quelque chose comme ce qui suit:

return this.http.get<Sidebar>('http://localhost:3000/sidebar/edit-sidebar');

Par exemple, Sidebar pourrait être défini comme suit:

interface Sidebar {
    _id: string;
    content: string;
}

Voir Vérification typographique de la réponse à partir de la documentation angulaire pour plus d'informations:

... TypeScript se plaindrait correctement que l'objet qui revient de HTTP ne possède pas de propriété results. En effet, alors que HttpClient analysait la réponse JSON dans un objet, il ne savait pas quelle forme cet objet était.

20
Kirk Larkin

solution alternative:

this.sidebar = sidebar["content"];

qui renvoie la valeur dans HttpClient, HttpClient analyse automatiquement la réponse JSON à un objet et la forme de cet objet n'est pas connue, c'est pourquoi TypeScript affiche cette erreur

12
Fateh Mohamed

Vous pouvez attribuer à la variable (barre latérale) une interface pour indiquer explicitement ce qu’elle obtiendra ou lui assigner afin qu’elle ne génère pas d’erreur de compilation. 

this.sidebarService.getSidebar().subscribe((sidebar: any) => {
                        this.sidebar = sidebar.content; 
                    });
8
Mayank Singh

vous pouvez le faire comme ça avec le type <any>

si vous faites cela, vous n'obtiendrez pas cette erreur

this.http.get<any>('http://localhost:3000/sidebar/edit-sidebar');
0
Cenk YAGMUR

Utiliser la notation entre crochets au lieu de la notation pointée pour référencersidebar['content']au lieu desidebar.content/ résoudra le problème.

La section Vérification de la réponse de la documentation angulaire sur HttpClient mentionne ceci, bien que ce ne soit pas tout à fait clair:

Le rappel d'abonnement ci-dessus nécessite une notation entre crochets pour extraire le valeurs de données. Vous ne pouvez pas écrire data.heroesUrl car TypeScript se plaint correctement que l'objet de données du service ne le fait pas avoir une propriété heroesUrl.

0
Kevin Leary

Essayez d’ajouter l’interface Sidebar à votre méthode d’abonnement:

this.sidebarService.getSidebar().subscribe((sidebar: Sidebar) => {
    this.sidebar = sidebar.content;
});

interface Sidebar {
    _id?: string;
    content?: string;
}
0
Dmitry Grinko