0

我有一个角度和角度材料项目，我试图从数据库中获取员工列表并以表格形式显示它们，该表格正在正确创建空间但输入未填充正确的信息，因为我没有不知道如何将元素链接到 matInput。

我知道信息确实到达了，因为正如我提到的，创建了与员工人数相对应的空间，我可以使用下面代码中看到的属性。

有谁知道我如何将 matinput 与到达的信息联系起来？

ts文件和html文件：

import { Component, OnInit } from '@angular/core';
import { empleadoLista } from '../modelos/empleadoLista.interface';
import { RegempleService } from '../regemple.service';
import { FormGroup, FormControl, Validators } from '@angular/forms';


@Component({
  selector: 'app-empleado',
  templateUrl: './empleado.component.html',
  styleUrls: ['./empleado.component.css']
})
export class EmpleadoComponent implements OnInit {

  listaE: empleadoLista[];
  regFrom:FormGroup;

  regForm = new FormGroup({
    cdidentificacion: new FormControl('', Validators.required),
    dsnombres: new FormControl('', Validators.required),
    dsapellidos: new FormControl('', Validators.required),
    cdtelefono: new FormControl('', Validators.required),
    dsciudad: new FormControl('', Validators.required),
    dsdireccion: new FormControl('', Validators.required),
    cdtelefonoemergencia: new FormControl('', Validators.required)
  });

  constructor(private api: RegempleService) { }

  ngOnInit(): void {
    this.api.getAllEmp().subscribe(data => { this.listaE = data });
    
  }


}
<mat-grid-list cols="1" rowHeight="700px" id="registrf" *ngFor="let emp of listaE">
    <mat-grid-tile>

        <div class="example-container">
            <h2>Empleado {{emp.dsnombres}}</h2>
            <form [formGroup]="regForm">
                <div class="dosenlinea">
                    <mat-form-field appearance="fill" class="width-100 ml-2">
                        <mat-label>Identificacion</mat-label>
                        <input matInput type="text" id="doc" formControlName="cdidentificacion" value="{{emp.cdidentificacion}}" isDisabled>

                    </mat-form-field>
                    <br>
                    <mat-form-field appearance="fill" class="width-100 ml-2">
                        <mat-label>Nombre</mat-label>
                        <input matInput type="text" id="nombre" formControlName="dsnombres" value="{{emp.dsnombres}}">

                    </mat-form-field>
                    <br>
                </div>
                <div class="dosenlinea">
                    <mat-form-field appearance="fill" class="width-100 ml-2">
                        <mat-label>Apellidos</mat-label>
                        <input matInput type="text" id="apellido" formControlName="dsapellidos" value="{{emp.dsapellidos}}">
                    </mat-form-field>
                    <br>
                    <mat-form-field appearance="fill" class="width-100 ml-2">
                        <mat-label>Telefono</mat-label>
                        <input matInput type="text" id="tel" formControlName="cdtelefono" value="{{emp.cdtelefono}}">
                    </mat-form-field>
                    <br>
                </div>
                <div class="dosenlinea">
                    <mat-form-field appearance="fill" class="width-100 ml-2">
                        <mat-label>Ciudad</mat-label>
                        <input matInput type="text" id="city" formControlName="dsciudad" value="{{emp.dsciudad}}">
                    </mat-form-field>
                    <br>
                    <mat-form-field appearance="fill" class="width-100 ml-2">
                        <mat-label>Direccion</mat-label>
                        <input matInput type="text" id="dir" formControlName="dsdireccion" value="{{emp.dsdireccion}}">
                    </mat-form-field>
                    <br>
                </div>
                <mat-form-field appearance="fill" class="width-100 ml-2">
                    <mat-label>Telefono Emergencias</mat-label>
                    <input matInput type="text" id="tel_eme" formControlName="cdtelefonoemergencia" value="{{emp.cdtelefonoemergencia}}">
                </mat-form-field>
                <br>
                <div class="btsrg">
                    <button mat-raised-button color="primary" type="submit" id="btton">
                    <span>Modificar</span>
                     </button>

                    <button mat-raised-button color="primary" type="clear" id="btton">
                    <span>Eliminar</span>               
                    </button>
                </div>
            </form>
        </div>
    </mat-grid-tile>
</mat-grid-list>

4

0 回答 0