1

Hola en estos momentos estoy aprendiendo a utilizar laravel + angular y desconozco la idea de como crear un select para llamar los valores que tengo de una llave foranea en este caso explico mi codigo.

ESTO ES DENTRO DE MI PROYECTO DE ANGULAR Dentro de mi carpeta src/app Tengo una carpeta llamada Interfaces y este contiene a mi empleado.ts

export interface Empleado{
    id?: number;
    nombre: string;
    apellido:string;
    direccion:string;
    telefono:string;
    edad:string;
    genero:boolean;
    fechacontrato:Date;
    tipoempleado_id:number; //Esta es mi llave foranea de mi tabla tipo de empleado
}

Dentro de la misma carpeta de src/app tengo mi componente llamado empleadoform Tengo la siguiente clase que compone mi empleado

export class EmpleadoformComponent implements OnInit {
 empleado: Empleado = {
 id: null,
 nombre:null,
 apellido:null,
 direccion:null,
 telefono:null,
 edad:null,
 genero:null,
 fechacontrato:null,
 tipoempleado_id:null,
 };

En mi empleadoform.component.html quiero intentar hacer lo siguiente

<div class="col-md-9">
     <select name="tipoempleado_id" [(ngModel)]="empleado.tipoempleado_id ">
     <option [value]="empleado" *ngFor="let empleado of empleado">{{empleado.tipoempleado_id.nombre}}</option>
      </select>
</div>

El error aqui es que no me carga nada en mi select eh estado investigando pero no doy como hacerlo creo que tengo que crear alguna función que me cargue los datos en mi empleadoform.component.ts para cargar mi los valores de tipoempleado, en este caso en mi select quisiera evaluar el id y que se visualice el nombre de ese tipo en mi option del select.

mi tipo.ts

export interface Tipo{
    id?: number;
    nombre: string;
    sueldo:string;
}

¿Alguien puede ser tan amable de ayudarme en que puedo estar fallando?

1 respuesta 1

0

Creo que ya se porque no jala los datos de en mi select

Lo que pasa es que no estoy creando un OngInit para que me pueda obtener los datos de mi tipo.ts el cual me ayudaria a poder

Este es el codigo de mi empleadoform.component.ts

alguien me puede ayudar a crear la funcion para obtener los datos porfavor :(

import { Component, OnInit } from '@angular/core';
import { Empleado } from '../interfaces/empleado';
import {EmpleadoService} from '../servicios/empleado.service';
import { ActivatedRoute } from '@angular/router';
import { HttpClient } from '@angular/common/http';
@Component({
 selector: 'app-empleadoform',
 templateUrl: './empleadoform.component.html',
 styleUrls: ['./empleadoform.component.css']
})
export class EmpleadoformComponent implements OnInit {
 empleado: Empleado = {
 id: null,
 nombre:null,
 apellido:null,
 direccion:null,
 telefono:null,
 edad:null,
 genero:null,
 fechacontrato:null,
 tipoempleado_id:null
 }; //este arreglo define los campos que se van a ingresar en el formulario

 API_ENDPOINT = 'http://localhost:8000/api';
 id:any;
 editing: boolean =false; //Este campo ayuda a saber cuando estamos editando y cuando estamos ingresando
 postarr: Empleado[]; //Este campo nos ayudara a traer los datos cuando queremos editar
 constructor(private empleadosService: EmpleadoService, private activatedRoute: ActivatedRoute, private httpClient: HttpClient) {
 this.id = this.activatedRoute.snapshot.params['id']; //Este es el parametro que se definio en la ruta de app.module.ts
 if (this.id){
 this.editing=true;
 this.httpClient.get(this.API_ENDPOINT + '/empleado').subscribe((data: Empleado[]) => { //Aqui traemos el arreglo completo de datos
 this.postarr =data['data'];
 this.empleado = this.postarr.find((m)=> {return m.id == this.id}); //Aqui traemos solo el id que nos interesa
 },(error)=>{
 console.log(error);
 });
 }else{
  this.editing = false;
  }
  }
  ngOnInit() {
  }
  savePost(){
    if (this.editing){
    this.empleadosService.put(this.empleado).subscribe((data)=>{ //El unico cambioes el put
    alert('Empleado actualizado');
    console.log(data)
    }, (error)=>{
    console.log(error);
    alert('Ocurrio un error');
    });
    }
    else{
    this.empleadosService.save(this.empleado).subscribe((data)=>{
    alert('Empleado guardado');
    console.log(data)
    }, (error)=>{
    console.log(error);
    alert('Ocurrio un error');
    });
    }
    }
 }

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.