angular - 如何使用+ Laravel在Angular中用外部表的值填充选择

Question

现在我正在学习使用laravel + angular，我不知道如何创建一个选择来调用我拥有的外键值，在这种情况下我解释我的代码。

这是在我的 ANGULAR 项目中 在我的 src / app 文件夹中，我有一个名为 Interfaces 的文件夹，它包含我的 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
}

在同一个 src / app 文件夹中，我有一个名为员工表单的组件我有以下组成我的员工的类

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

在我的员工 form.component.html 我想尝试执行以下操作

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

这里的错误是它没有在我的选择中加载任何东西，我一直在调查，但我不知道该怎么做，我想我必须创建一些函数来加载我的员工 form.component.ts 中的数据以加载我的员工类型的值，在这种情况下，在我的选择中，我想评估 id 并在我的选择选项中显示该类型的名称。

我的提示.ts

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

任何人都可以帮助我，我可能会失败吗？谢谢

标签： angularlaravelcrudrest

Answer 1

我想我知道为什么它会给我一个错误，我不知道如何创建一个可以从 type.ts 中提取数据的 OngInit 以便我可以列出它。

这是我的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');
    });
    }
    }
 }