Argumento de tipo 'cadena | null' no se puede asignar al parámetro de tipo 'cadena'. El tipo 'nulo' no se puede asignar al tipo 'cadena'
Tengo un proyecto dotnetcore 20 y angular4 en el que estoy intentando crear un servicio de usuario y llevar al usuario a mi componente de inicio. El backend funciona bien pero el servicio no. El problema está en localStorage . El mensaje de error que tengo es:
Argumento de tipo 'cadena | null' no se puede asignar al parámetro de tipo 'cadena'. El tipo 'nulo' no se puede asignar al tipo 'cadena'.
Y mi servicio de usuario
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 });
}
}
Y mi home.component.ts es
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; });
}
El error esta activadoJSON.parse(localStorage.getItem('currentUser'));
Como dice el error, localStorage.getItem()puede devolver una cadena o un archivo null. JSON.parse()requiere una cadena, por lo que debes probar el resultado localStorage.getItem()antes de intentar usarlo.
Por ejemplo:
this.currentUser = JSON.parse(localStorage.getItem('currentUser') || '{}');
o quizás:
const userJson = localStorage.getItem('currentUser');
this.currentUser = userJson !== null ? JSON.parse(userJson) : new User();
Véase también la respuesta de Willem De Nys . Si está seguro de que la localStorage.getItem()llamada nunca podrá regresar, nullpuede usar el operador de aserción no nula para indicarle a mecanografiado que sabe lo que está haciendo:
this.currentUser = JSON.parse(localStorage.getItem('currentUser')!);
la respuesta aceptada es correcta, solo quiere agregar una respuesta más nueva y más corta.
this.currentUser = JSON.parse(localStorage.getItem('currentUser')!);
Usando Angular o TS: -
JSON.parse(localStorage.getItem('user') as string);
o
JSON.parse(localStorage.getItem('user') as any);
El operador de aserción no nula funcionó muy bien para mí:
(1). en mi caso
this.currentUserSource.next(null!)
(2). en tu caso
this.currentUser = JSON.parse(localStorage.getItem('currentUser')!);
