I am currently working on retrieving data from the backend/api and attempting to display it using *ngFor. However, I am encountering the following errors:
Cannot read property 'values' of undefined
Below are the components, service codes, and authorization method in contas.component:
import { Component, OnInit } from '@angular/core';
import { NgbModal, ModalCloseReasons } from '@ng-bootstrap/ng-bootstrap';
import { ContaBancaria } from 'src/app/models/conta-bancaria';
import { ContaBancariaService } from './services/contas.service';
@Component({
selector: 'app-contas',
templateUrl:'./contas.component.html'
})
export class ContasComponent implements OnInit {
closeResult = '';
public contasBancarias: ContaBancaria[];
errorMessage: string;
constructor(private modalService: NgbModal,private contaBancariaService: ContaBancariaService) {}
ngOnInit(): void{
this.contaBancariaService.obterTodos()
.subscribe(
contasBancarias => this.contasBancarias = contasBancarias,
error => this.errorMessage);
console.log(this.contasBancarias.values);
}
}
Next is the code snippet from contas.service:
import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs";
import { catchError, map } from "rxjs/operators";
import { BaseService } from 'src/app/services/base.service';
import { ContaBancaria } from '../../../../models/conta-bancaria';
@Injectable()
export class ContaBancariaService extends BaseService {
contaBancaria: ContaBancaria = new ContaBancaria();
constructor(private http: HttpClient) { super() }
obterTodos(): Observable<ContaBancaria[]> {
return this.http
.get<ContaBancaria[]>(this.apiUrlRestrita + "/contasbancarias", super.ObterAuthHeaderJson())
.pipe(
catchError(super.serviceError));
}
}
protected ObterAuthHeaderJson() {
return {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': `Bearer ${this.LocalStorage.obterTokenUsuario()}`
})
};
}
EDIT: Here is the expected JSON/data format from the API for reference: