如何使用 + Laravel 在 Angular 中用外部表的值填充 select

Question

right now I am learning to use laravel + angular and I do not know the idea of how to create a select to call the values I have of a foreign key, in this case I explain my code.

THIS IS INSIDE MY ANGULAR PROJECT Inside my src / app folder I have a folder called Interfaces and it contains my employee.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
}

Inside the same src / app folder I have my component called employee form I have the following class that makes up my employee

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,
 };

In my employee form.component.html I want to try doing the following

<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>

The error here is that it does not load anything in my select and I have been investigating but I do not know how to do it, I think I have to create some function that loads the data in my employee form.component.ts to load my values of type employee, in this case in my select I would like to evaluate the id and have the name of that type displayed in my select option.

my tipo.ts

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

Can anyone be so kind to help me that I may be failing? thanks

Answer 1

I think I know why it gives me an error, I don't know how to create an OngInit that can extract the data from type.ts so that I can then list it.

This is my code for my employeesform.component.ts

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');
    });
    }
    }
 }