0

Помогите получить данные пользователя из АПИ, присвоить переменным, которые использовать в любом из компонентов Делаю так:

АПИ:

{"login": "test", "ban": 0}

Корневой app.module.ts:

...
import { UserService } from './shared/user.service';
...
providers: [ UserService ],
...

user.service.ts Вот тут начинаются проблемы, мое понимание углового пока на уровне копипаста

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';

export class User {
      login: string;
      ban: number;
}

@Injectable()
export class UserService {

  constructor(private http: HttpClient) { }

  user: User

  ngOnInit() {
    this.http.get('/server/api/userService').subscribe((data: User) => {
    this.user = data;
     test = this.user['login']; // <- В этом моменте непонятности
    }
    );
  }
}
3
  • а в чем заключаются "непонятности"? 25 дек 2019 в 10:57
  • Мне надо: При загрузке страницы сделать запрос к апи (без отправки параметров), от которого получить данные пользователя в формате json; Присвоить переменным полученные значения; Разместить все в нужном месте, чтобы в любом компоненте я мог в шаблоне вставить {{user.login}}
    – Vadim
    25 дек 2019 в 16:33
  • а вы ngOnInit где-то вызываете? он для сервисов автоматически не вызывается, как для компонентов 25 дек 2019 в 17:06

2 ответа 2

1

Исправьте ваш user.service.ts

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import { Observable, throwError as observableThrowError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { User } from 'PATH_TO_user.model';

@Injectable({
  providedIn: 'root'
})
export class UsersService {

constructor (
  private http: HttpClient
) {}

getUsers(): Observable<User[]> {
  return <Observable<User[]>> this.http
    .get(`/server/api/userService`)
    .pipe(
      catchError((error: any) => observableThrowError(error) )
    );
}

Если вам нужно получить данные одного юзера, нужно передать его id:

getUserById(userId: number): Observable<User> {
  return <Observable<User>> this.http
    .get(`/server/api/userService/${userId}`)
    .pipe(
      catchError((error: any) => observableThrowError(error) )
    );
}

Запрос к серверу и подписку на получение данных вынесите в компонент:

public usersList: User[] = [];
public userId: number;
public user: User;

loadUsersListSubscription: Subscription;
loadUserSubscription: Subscription;

constructor (
  private route: ActivatedRoute,
  private usersService: UsersService
) {
  this.userId = Number(route.snapshot.paramMap.get('userId')) || null;
}

ngOnInit() {
  this.loadUsersList();
  this.loadUser(this.userId);
}

loadUsersList(): void {
  this.loadUsersListSubscription = this.usersService.getUsers().subscribe(
    (response: User[]) => {
      this.usersList = response || null;
    }
  );
}

loadUser(userId: number) {
  this.loadUserSubscription = this.usersService.getUserById(userId).subscribe(
    (user: User) => {
      this.user = user || null;
    }
  );
}
2
  • Alex, спасибо за развернутый ответ, но я так понимаю, подписку на получение данных придется вносить во все компоненты, где понадобятся данные пользователя? Я Имею ввиду последний блок кода. Я бы хотел объявить эти переменные глобально и забыть. Вот немного упростил вопрос: ru.stackoverflow.com/questions/1063408/…
    – Vadim
    26 дек 2019 в 12:06
  • 1
    Да. Подписываетесь на получение данных в тех компонентах где это нужно. Чтобы сделать как вы описали подключайте в проект NgRx и получайте данные в компоненте реактивно.
    – Alex
    26 дек 2019 в 15:09
0

Не понятно в чем проблема. Вы же присвоили все в подписке this.user = data;

Обращайтесь к своей переменной теперь, например console.log(this.user.login)

1
  • В консоли тишина, делаю так: ngOnInit() { return this.http.get('/server/api/userService').subscribe((data: User) => { this.user = data; console.log(this.user.login); } ); }
    – Vadim
    25 дек 2019 в 16:05

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.