web-dev-qa-db-ja.com

型 'stringの引数| nullは、タイプ 'string'のパラメーターに割り当てることができません。タイプ「null」はタイプ「string」に割り当てられません

私は、userServiceを作成して、ユーザーをホームコンポーネントに誘導しようとしているdotnetcore 20およびangular4プロジェクトを持っています。バックエンドは正常に機能しますが、サービスは機能しません。問題はlocalStorageにあります。私が持っているエラーメッセージは次のとおりです：

型 'stringの引数| nullは、タイプ 'string'のパラメーターに割り当てることができません。タイプ「null」は、タイプ「string」に割り当てることができません。

そして、私の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 });
    }
}
_

そして、私のhome.component.tsは

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

エラーはJSON.parse(localStorage.getItem('currentUser'));にあります

angulartypescriptasp.net-core.net-core
18
GoGo

エラーが言うように、localStorage.getItem()は文字列またはnullを返すことができます。 JSON.parse()には文字列が必要なので、使用する前にlocalStorage.getItem()の結果をテストする必要があります。

例えば：

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

多分：

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

Willem De Nysからの回答 も参照してください。 localStorage.getItem()呼び出しがnullを決して返さないと確信している場合は、null以外のアサーション演算子を使用して、実行していることをTypeScriptに伝えることができます。

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

受け入れられた答えは正解であり、単に新しくて短い答えを追加したいだけです。

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