Блог

У меня эта проблема с моим кодом angular, и, кстати, я использую angular 13 для своего приложения. проблема в том, что при вызове служб я пытаюсь вызвать пользовательский api с серверной части и все время сталкиваюсь с этой проблемой. Я много искал и пробовал все, чтобы это сработало, но без какого-либо решения. это код ниже: это пользовательский сервис:

 import { HttpClient, HttpResponse } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { Observable } from 'rxjs'; import { JwtHelperService } from '@auth0/angular-jwt'; import { environment } from 'src/environments/environment'; import { User } from "../module/user";  @Injectable({providedIn: 'root'}) export class UserService {  public apiUrl = environment.apiUrl;  private jwtHelper = new JwtHelperService();   constructor(private http: HttpClient) {}   login(user: User): Observablelt;HttpResponselt;Usergt;gt; {  return this.http.postlt;Usergt;(`${this.apiUrl}/user/login`, user, { observe: 'response'});  }   register(user: User): Observablelt;HttpResponselt;Usergt;gt; {  return this.http.postlt;Usergt;(`${this.apiUrl}/user/register`, user, { observe: 'response'});  }   updateUser(formData: FormData): Observablelt;Usergt; {  return this.http.postlt;Usergt;(`${this.apiUrl}/user/update`, formData);  }   deleteUser(username: string): Observablelt;anygt; {  return this.http.deletelt;anygt;(`${this.apiUrl}/user/delete/${username}`);  }   addUserToCache(user: User): void {  localStorage.setItem('user', JSON.stringify(user));  }   getUserFromCache(): User {  return JSON.parse(localStorage.getItem('user'));  }   addTokenToCache(token: string): void {  localStorage.setItem('token', token);  }   getTokenFromCache(): string {  return localStorage.getItem('token');  }   logOut(): void {  localStorage.removeItem('user');  localStorage.removeItem('token');  }   getTokenExpirationDate(): Date | null {  return this.jwtHelper.getTokenExpirationDate(this.getTokenFromCache());  }   isUserLoggedIn(): boolean {  if (this.getTokenFromCache() amp;amp; this.getUserFromCache() amp;amp;  this.jwtHelper.decodeToken(this.getTokenFromCache()).sub amp;amp;  !this.jwtHelper.isTokenExpired(this.getTokenFromCache())) {  return true;  } else {  this.logOut();  return false;  }  }   createUserFormData(currentUsername: string, user: User): FormData {  const formData = new FormData();  formData.append('currentUsername', currentUsername);  formData.append('username', user.username);  formData.append('email', user.email);  formData.append('role', user.role);  formData.append('isActive', JSON.stringify(user.active));  formData.append('isNonLocked', JSON.stringify(user.notLocked));  return formData;  } }   

это данные пользователя

 export class User {  constructor(  public id = 0,  public userId = '',  public username = '',  public email = '',  public lastLoginDate = null,  public logInDateDisplay = null,  public joinDate = null,  public active = true,  public notLocked = true,  public role = '',  public authorities = []) {}  }   

это ошибка, показанная мне:

 Error: src/app/role/admin/admin.component.ts:15:22 - error TS2339: Property 'getAdmin' does not exist on type 'UserService'.  15 this.userService.getAdmin().subscribe(  ~~~~~~~~   Error: src/app/role/admin/admin.component.ts:16:7 - error TS7006: Parameter 'data' implicitly has an 'any' type.  16 data =gt; {  ~~~~   Error: src/app/role/admin/admin.component.ts:19:7 - error TS7006: Parameter 'err' implicitly has an 'any' type.  19 err =gt; {  ~~~   Error: src/app/service/user.service.ts:36:23 - error TS2345: Argument of type 'string | null' is not assignable to parameter of type 'string'.  Type 'null' is not assignable to type 'string'.  36 return JSON.parse(localStorage.getItem('user'));  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~   Error: src/app/service/user.service.ts:44:5 - error TS2322: Type 'string | null' is not assignable to type 'string'.  Type 'null' is not assignable to type 'string'.  44 return localStorage.getItem('token');  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~     ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **   ✖ Failed to compile. ✔ Browser application bundle generation complete.  5 unchanged chunks  Build at: 2021-11-29T07:19:50.781Z - Hash: 1847dd9fe6fe2628 - Time: 350ms  Error: src/app/role/admin/admin.component.ts:15:22 - error TS2339: Property 'getAdmin' does not exist on type 'UserService'.  15 this.userService.getAdmin().subscribe(  ~~~~~~~~   Error: src/app/role/admin/admin.component.ts:16:7 - error TS7006: Parameter 'data' implicitly has an 'any' type.  16 data =gt; {  ~~~~   Error: src/app/role/admin/admin.component.ts:19:7 - error TS7006: Parameter 'err' implicitly has an 'any' type.  19 err =gt; {  ~~~   Error: src/app/service/user.service.ts:36:23 - error TS2345: Argument of type 'string | null' is not assignable to parameter of type 'string'.  Type 'null' is not assignable to type 'string'.  36 return JSON.parse(localStorage.getItem('user'));  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~   Error: src/app/service/user.service.ts:44:5 - error TS2322: Type 'string | null' is not assignable to type 'string'.  Type 'null' is not assignable to type 'string'.  44 return localStorage.getItem('token');  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~     ✖ Failed to compile.    

в службе нет функции, которая называется

getAdmin()

реализуйте функцию в службе до ее вызова.

Попробуйте это

 return localStorage.getItem('token') || '';  

Это решит только проблему компилятора tsc.

это правильно, когда вы берете элемент из локального хранилища, возвращаемый тип равен нулю или строке,

 getItem(key: string): string | null;  

и вы не можете разобрать null, прежде JSON.parse чем вы должны убедиться, что элемент присутствует, и вы получите его

попробуйте использовать любой вместо пользователя в качестве ссылки, чтобы это помогло вам получить объект

getUserFromCache(): any { return JSON.parse(localStorage.getItem('user')); }

пожалуйста, сначала напишите функцию getAdmin() в классе UserService, чтобы решить эту проблему