Buenas estoy realizando un proyecto don angular y Django donde utilizo PostgreSQL como base de datos, estoy intentando listar los usuarios en un tabla, pero los campos sexo
y tipoidentificacion
que son llaves foráneas me muestra los id(1 y 2), así como muestro a continuación.
A continuación les dejos los archivos de Django y Angular que estoy utilizando:
Archivos Django:
Archivo models.py
:
from django.db import models
class Sexo(models.Model):
nombre = models.CharField(max_length=30)
class TipoIdentificacion(models.Model):
nombre = models.CharField(max_length=30)
class Persona(models.Model):
nombres = models.CharField(max_length=30)
apellidos = models.CharField(max_length=60)
identificacion = models.CharField(max_length=20)
tipoidentificacion = models.ForeignKey(TipoIdentificacion, on_delete=models.CASCADE)
sexo = models.ForeignKey(Sexo, on_delete=models.CASCADE)
direccion = models.CharField(max_length=60)
telefono = models.CharField(max_length=10)
Archivo views.py
:
from django.shortcuts import render
from rest_framework import viewsets
from clientes_app.models import Persona, Sexo, TipoIdentificacion
from clientes_app.serializers import PersonaSerializer, SexoSerializer, TipoIdentificacionSerializer
class PersonaLista (viewsets.ModelViewSet):
queryset = Persona.objects.all
serializer_class = PersonaSerializer
class SexoLista (viewsets.ModelViewSet):
queryset = Sexo.objects.all()
serializer_class = SexoSerializer
class TipoIdentificacionLista (viewsets.ModelViewSet):
queryset = TipoIdentificacion.objects.all()
serializer_class = TipoIdentificacionSerializer
Archivo serializers.py
:
from rest_framework import serializers
from clientes_app.models import Persona, Sexo, TipoIdentificacion
class PersonaSerializer(serializers.ModelSerializer):
class Meta:
model = Persona
fields = '__all__'
class SexoSerializer(serializers.ModelSerializer):
class Meta:
model = Sexo
fields = '__all__'
class TipoIdentificacionSerializer(serializers.ModelSerializer):
class Meta:
model = TipoIdentificacion
fields = '__all__'
Archivos Angular:
Archivo sevicio.ts
:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { UsuariosI } from './../../interfaces/usuarios/usuarios'
@Injectable({
providedIn: 'root'
})
export class UsuariosService {
URL_API = 'http://localhost:8000';
constructor(private http:HttpClient) { }
obtenerUsuarios(){
return this.http.get(`${this.URL_API}/persona/`);
}
}
Archivo listar-usuarios.ts
:
import { Component, OnInit } from '@angular/core';
import { UsuariosService } from 'src/app/services/usuarios/usuarios.service';
@Component({
selector: 'app-listar-usuarios',
templateUrl: './listar-usuarios.component.html',
styleUrls: ['./listar-usuarios.component.css']
})
export class ListarUsuariosComponent implements OnInit {
usuarios:any = [];
displayedColumns: string[] = ['identificacion', 'tipoidentificacion', 'nombres', 'apellidos', 'sexo', 'telefono', 'direccion'];
dataSource:any;
constructor(private usuariosService:UsuariosService) { }
ngOnInit(): void {
this.mostrarUsuarios();
}
mostrarUsuarios(){
this.usuariosService
.obtenerUsuarios()
.subscribe(
res =>{
this.dataSource = res;
console.log(this.dataSource)
},
err => console.log(err)
)
}
}