angular - Argument av typen 'string | null' kan inte tilldelas parametern av typen 'string'. Typen 'null' kan inte tilldelas typen 'string'

Jag har ett dotnetcore 20- och angular4-projekt som jag försöker skapa en userService för och hämta användaren till min hemkomponent. Backend fungerar precis som den ska men tjänsten gör det inte. Problemet ligger på localStorage. Felmeddelandet som jag har är:

Argument av typen 'string | null' kan inte tilldelas parametern av typen 'string'. Typen 'null' kan inte tilldelas typen 'string'.

Och min 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 });
    }
}

Och min home.component.ts är

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; });
}

Felet är på JSON.parse(localStorage.getItem('currentUser'));

Svar #1

Som felet säger, localStorage.getItem() kan returnera antingen en sträng eller null. JSON.parse() kräver en sträng, så du bör testa resultatet av localStorage.getItem() innan du försöker använda det.

Till exempel:

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

eller kanske:

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

Se även svaret från Willem De Nys. Om du är säker på att anropet localStorage.getItem() aldrig kan returnera null kan du använda icke-null-assertionsoperatorn för att tala om för TypeScript att du vet vad du gör:

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

Svar #2

det accepterade svaret är korrekt, vill bara lägga till ett nyare och kortare svar.

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

Svar #3

Att använda Angular eller TS:-

JSON.parse(localStorage.getItem('user') as string);

eller

JSON.parse(localStorage.getItem('user') as any);

Svar #4

Operatorn för icke-null-assertion fungerade mycket bra för mig:

(1). i mitt fall

this.currentUserSource.next(null!)

(2). i ditt fall

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

Relaterade artiklar