web-dev-qa-db-fra.com

Argument de type 'string | null 'n'est pas assignable à un paramètre de type' chaîne '. Le type 'null' n'est pas assignable au type 'chaîne'

J'ai un projet dotnetcore 20 et angular4 que je tente de créer un service utilisateur et d'amener l'utilisateur à mon composant home. Le backend fonctionne très bien mais le service ne fonctionne pas. Le problème est sur localStorage. Le message d'erreur que j'ai est le suivant:

Argument de type 'string | null 'n'est pas assignable à un paramètre de type' chaîne '. Le type 'null' n'est pas assignable au type 'chaîne'.

Et mon userService

import { User } from './../models/users';
import { AppConfig } from './../../app.config';
import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions, Response } from '@angular/http';



@Injectable()
export class UserService {
constructor(private http: Http, private config: AppConfig) { }

getAll() {
    return this.http.get(this.config.apiUrl + '/users', this.jwt()).map((response: Response) => response.json());
}

getById(_id: string) {
    return this.http.get(this.config.apiUrl + '/users/' + _id, this.jwt()).map((response: Response) => response.json());
}

create(user: User) {
    return this.http.post(this.config.apiUrl + '/users/register', user, this.jwt());
}

update(user: User) {
    return this.http.put(this.config.apiUrl + '/users/' + user.id, user, this.jwt());
}

delete(_id: string) {
    return this.http.delete(this.config.apiUrl + '/users/' + _id, this.jwt());
}

// private helper methods

private jwt() {
    // create authorization header with jwt token
    let currentUser = JSON.parse(localStorage.getItem('currentUser'));
    if (currentUser && currentUser.token) {
        let headers = new Headers({ 'Authorization': 'Bearer ' + currentUser.token });
        return new RequestOptions({ headers: headers });
    }
}

Et mon home.component.ts est

import { UserService } from './../services/user.service';
import { User } from './../models/users';
import { Component, OnInit } from '@angular/core';

@Component({
moduleId: module.id,
templateUrl: 'home.component.html'
})

export class HomeComponent implements OnInit {
currentUser: User;
users: User[] = [];

constructor(private userService: UserService) {
   this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
}

ngOnInit() {
   this.loadAllUsers();
}

deleteUser(_id: string) {
   this.userService.delete(_id).subscribe(() => { this.loadAllUsers() });
}

private loadAllUsers() {
   this.userService.getAll().subscribe(users => { this.users = users; });
}

L'erreur est sur JSON.parse(localStorage.getItem('currentUser'));

angulartypescriptasp.net-core.net-core
18
GoGo

Comme le dit l'erreur, localStorage.getItem() peut renvoyer une chaîne ou null. JSON.parse() nécessite une chaîne, vous devez donc tester le résultat de localStorage.getItem() avant de l'utiliser.

Par exemple:

this.currentUser = JSON.parse(localStorage.getItem('currentUser') || '{}');

ou peut-être:

const userJson = localStorage.getItem('currentUser');
this.currentUser = userJson !== null ? JSON.parse(userJson) : new User();

Voir aussi le réponse de Willem De Nys . Si vous êtes sûr que l'appel localStorage.getItem() ne peut jamais renvoyer null, vous pouvez utiliser l'opérateur d'assertion non null pour indiquer à TypeScript que vous savez ce que vous faites:

this.currentUser = JSON.parse(localStorage.getItem('currentUser')!);
52
Duncan

la réponse acceptée est correcte, souhaite simplement ajouter une réponse plus récente et plus courte.

this.currentUser = JSON.parse(localStorage.getItem('currentUser')!);
9
Willem De Nys