Angular 如何设计http请求服务？我做错了什么？

我想问一下，对于我想要实现的目标，任何人都认为最好的实现方式是什么

我希望在组件初始化时从HTTP请求获取数据，同时处理数据。数据将来自将实现

HttpClient.get（）请求的服务

组成部分：

import {AfterViewInit, Component, OnInit} from '@angular/core';
import {HttpHandleService} from '../services/http-handle.service';

@Component({
    selector: 'app-http-displayer',
    templateUrl: './http-displayer.component.html',
    styleUrls: ['./http-displayer.component.css']
})
export class HttpDisplayerComponent implements OnInit, AfterViewInit {
    public data: any = [];

    constructor(private httpHandleService: HttpHandleService) {
    }

    ngOnInit() {
        this.httpHandleService.getData().subscribe((recivedData) => this.data = recivedData); // get the data 
        doSomthing(this.data); // want to process the data here, but still data is empty array
    }

    ngAfterViewInit(): void {
        doSomething(this.data);  // want to process the data here, but still, data is an empty array
        // What I was thinking is that by the time this lifecycle hook will be activated this.data will be assigned with the received data.
    }
}

服务：

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

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

    constructor(private http: HttpClient) {
    }

    getData(): Observable<any> {
        return this.http.get('https://reqres.in/api/users?page=2');
    }
}

从'@angular/core'导入{Injectable}；
从“rxjs”导入{Observable}；
从'@angular/common/http'导入{HttpClient}；
@注射的({
providedIn:'根'
})
导出类HttpHandleService{
构造函数（专用http:HttpClient）{
}
getData（）：可观察{
返回此.http.get（'https://reqres.in/api/users?page=2');
}
}
观测值是异步的

关于什么是可观测的以及它是如何工作的，有很多很多的指南。角度有几个：
观测值是异步的

关于什么是可观测的以及它是如何工作的，有很多很多的指南。Angular有几点：
您可以在订阅块内处理接收到的数据。请通读异步JavaScript，特别是Observable-如果您想在组件中使用该值，您必须处理它不会立即可用的事实。您可以在subscribe块内处理接收到的数据。请通读异步JavaScript，特别是observables-如果您想在组件中使用该值，您必须处理它不会立即可用的事实。
this.httpHandleService.getData().subscribe((receivedData) => { 
  this.data = receivedData;
  this.doSomething(this.data); // accessed here
});