agradecería me orientaran como traerme los resultados del siguiente JSON a mi html en Angular, está es la estructura que tengo hasta el momento (Soy nuevo en Angular) :
json (Registro):
{
"id": 24,
"persona_id": 111111,
"fecha_registro": "2023-01-23 17:00:02",
"personas": {
"id": 111111,
"fullname": "Juan Rosas",
"status": "activo",
"area_id": 1,
"area": {
"id": 1,
"nombre": "Administración",
},
"empresa": {
"id": 1,
"nombre": "ASFOS",
}
}
}
Modelos en Angular :
Registro:
export interface Registro {
id: number;
fecha_registro: string;
persona_id: number;
personas: Persona[];
}
Persona:
export interface Persona {
id: number;
cod_ext: number;
nombres: string;
apellidop: string;
apellidom: string;
fullname: string;
rut: string;
email: string;
picture_id: string;
status: string;
fecha_carga: Date;
area_id: number;
empresa_id: number;
cargo_id: number;
estado_id: number;
created_at: null;
updated_at: null;
estado: Estado;
area: Area;
empresa: Empresa;
cargo: Cargo;
registro: Registro[];
}
Servicio :
getLast(){
return this.http.get(`${environment.api_url}/getDataRegistros`);
}
Componente TS :
registros: Registro[] = [];
getLastRegistro(){
this._registroService.getLast().subscribe(data=>{
this.registros = data;
console.log(data);
});
}
Componente HTML
<div *ngFor="let registro of registros">
<h2>{{ registro.personas.fullname }}</h2>
<h2>{{ registro.personas.area.nombre}}</h2>
</div>
Cuando quiero leer esto desde html en un label o solo mostrar me arroja el siguiente error :
Error TS2339: Property 'personas' does not exist on type 'Registro'.
ERROR Error: NG0900: Error trying to diff '[object Object]'. Only arrays and iterables are allowed
Agradeceré alguna orientación como hacer esto correctamente, gracias !!
Saludos..