[解決済み] 文字列|ヌル'型の引数は、文字列'型のパラメータに代入できません。タイプ 'null' はタイプ 'string' に割り当てられません。
2022-05-13 18:26:16
質問
私はdotnetcore 20とangular4プロジェクトを持っていて、userServiceを作成し、ユーザーを私のホームコンポーネントに取得しようとしています。バックエンドは問題なく動作しますが、サービスは動作しません。問題は 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'));
どのように解決するのですか?
エラーにあるように
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
を返さない場合、non-nullアサーション演算子を使うことで、typescriptに自分が何をしているのかが分かるようになります。
this.currentUser = JSON.parse(localStorage.getItem('currentUser')!);
関連
-
[解決済み】TypeScriptの "not assignable to parameter of type never "エラーとは?
-
[解決済み】Typescript Type 'string' はタイプに割り当てられない。
-
[解決済み] ng buildの後にangular-cliのdist-folderのパスを変更するには?
-
[解決済み] コンポーネントクラスからテンプレート参照変数にアクセスする
-
[解決済み] Angularで、コントロールが作成された後、FormControlにバリデータを追加する方法は?
-
[解決済み] Angular / Angular Materialでmat-horizontal-stepperのステップをプログラムで移動させることは可能ですか?
-
[解決済み] Angular v5からAngular v6にプロジェクトをアップグレードしたい。
-
[解決済み] 文字列|ヌル'型の引数は、文字列'型のパラメータに代入できません。タイプ 'null' はタイプ 'string' に割り当てられません。
-
[解決済み] RxJSのmap演算子でエラーを出す方法 (angular)
-
[解決済み] Karma/Jasmineのテストで「[object ErrorEvent] thrown」エラーが発生した場合、どのようにデバッグすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] ng buildの後にangular-cliのdist-folderのパスを変更するには?
-
[解決済み] Angular 2におけるEventEmitter.next()とEventEmitter.emit()の相違点
-
[解決済み] コンポーネントクラスからテンプレート参照変数にアクセスする
-
[解決済み] Angularで、コントロールが作成された後、FormControlにバリデータを追加する方法は?
-
[解決済み] Angular / Angular Materialでmat-horizontal-stepperのステップをプログラムで移動させることは可能ですか?
-
[解決済み] Angular v5からAngular v6にプロジェクトをアップグレードしたい。
-
[解決済み] Angular2 bodyタグにクラスを追加する
-
[解決済み] AngularでFormArrayからすべての項目を削除する
-
[解決済み] RxJSのmap演算子でエラーを出す方法 (angular)
-
[解決済み] Karma/Jasmineのテストで「[object ErrorEvent] thrown」エラーが発生した場合、どのようにデバッグすればよいですか?