Как дожидаться ответа от сервиса Angular?

Question

[Chvalov]

Есть ApiService через который выполняются запросы к back-у

api.service.ts

const BASE_URL  = 'http://127.0.0.1:8080/api/';
const VERSION   = 'v1';

const httpOptions = {
    headers: new HttpHeaders({
        'Content-Type':  'application/json',
};

@Injectable()
export class ApiService {
    readonly rootUrl = BASE_URL + VERSION + '/';

    constructor(private httpClient: HttpClient) { }

    // GET
    public get(path: string): Observable<any> {
        return this.httpClient
            .get(this.rootUrl + path, httpOptions)
            .pipe(catchError(this.formatErrors));
    }
}

Модель проектов:

project.model.ts

import {Request} from "./request.model";

export interface PageProject {
    content: Project[];
    totalPages: number;
    totalElements: number;
    last: boolean;
    size: number;
    first: boolean;
    sort: string;
    numberOfElements: number;
}

export interface Project {
    id: number;
    name: string;
    description: string;
    created: string;
    updated: string;
    requests: Request[];
}

Сервис который обрабатывает запросы к проектам:

project.service.ts

const routes = {
    projects: 'projects',
    project: (id: number) =>  `projects/${id}`
};

@Injectable()
export class ProjectService {
    constructor(private apiService: ApiService) { }

    public getAll(): Observable<PageProject>  {
        return this.apiService.get(routes.projects);
    }
}

И компонент в котором я должен получить данные с сервиса:

project-list.component.ts

export class ProjectListComponent implements OnInit {

    constructor(private projectService: ProjectService) { }
    test: PageProject;

    ngOnInit(): void {
        this.projectService.getAll().subscribe(data => this.test = data);
        console.log(this.test);
    }

И вот в чем проблема, в Инструментах разработчика я вижу что запрос к back-у выполнен, но переменная test -> undefined
Создал метод который вызывается при клике по кнопке

getTestLog(): void {
        console.log(this.test);
    }

при вызове данного метода уже есть данные в переменной, как выяснилось console.log() выполняется сразу после

this.projectService.getAll().subscribe(data => this.test = data);

не дожидаясь ответа.
Как исправить ?

Answer 1

[JokerS_Smile]

Лямбда из subscribe выполнится после того как придет ответ, в эту лямбда можно и вынести console.log, чтобы посмотреть что пришло в ответе

Answer 2

[Владимир]

https://www.udemy.com/the-complete-guide-to-angular-2/
Тут хорошо рассказывают и азы и работу с RxJS и даже NgRx цепляют напоследок. Для старта хватит, а дальше только от вас зависит.