I've been working on retrieving data from the database and storing it in the accountInfo array. Despite successfully fetching the data, the array appears to be empty when I log it. I've tried troubleshooting various options but haven't been able to identify the root cause of the issue.
account.component.ts
import { Component, Inject, OnInit } from '@angular/core';
import { AccountService } from './account.service';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { AccountInfo } from './accountListItem';
@Component({
selector: 'app-account',
templateUrl: './account.component.html',
styleUrls: ['./account.component.scss'],
providers: [AccountService],
})
export class AccountComponent implements OnInit {
public accountInfo = [];
public userId: string;
constructor(private accountService: AccountService) { }
ngOnInit() {
this.userId = localStorage.getItem('user_id');
this.accountService.getAccountInfo(this.userId)
.subscribe(data => this.accountInfo = data);
console.log(this.accountInfo);
}
}
account.service.ts
import { Injectable } from '@angular/core';
import { Observable , of } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { AccountInfo } from './accountListItem';
import { environment } from '../../environments/environment';
@Injectable()
export class AccountService {
constructor(private http: HttpClient) {}
getAccountInfo(userId: any): Observable<AccountInfo[]> {
return this.http.get<AccountInfo[]>(`${environment.apiUri}/user?userid=${userId}`);
}
}