angular - 用来自另一个界面的数据填充选择

Question

我有一个与另一个合作者链接的表格合作者：区域，在前面，我想在输入新合作者时选择显示可用的区域。问题是，我有一个角度的反应形式，它使用colaborador（西班牙语中的colaborator）界面，但我还有另一个界面区域，所以如何显示数据并以colaborator的形式只保存区域的id ?

export interface Area {
    id: number,
    nombre: string
}

export interface Colaborador {
    numeroDeIndentificacion: number,
    nombres: string,
    apellidos: string, 
    direccion: string,
    email: string,
    telefono: string,
    salario: number,
    fk_Area: number,    
    fechaDeIngreso: Date,
    sexo: string,
    codigoInterno: number
}

在组件上：

colaborador: Colaborador = {
    numeroDeIndentificacion: null,
    nombres: null,
    apellidos: null,
    direccion: null,
    email: null,
    telefono: null,
    salario: null,
    fk_Area: null,    
    fechaDeIngreso: null,
    sexo: null,
    codigoInterno: null
  };

  area: Area = {
    id: null,
    nombre: null
  };

  areas: Area[] = [];

 myForm: FormGroup;    
  submitted = false;    
  elCodigoInterno: string;

  constructor(private formBuilder: FormBuilder, private dataService: DataService) { }
    
  iniciarFormulario(){
      this.myForm = new FormGroup({        
        numeroDeIndentificacion: new FormControl(this.colaborador.numeroDeIndentificacion, [Validators.required, Validators.minLength(4), Validators.maxLength(30)]),       
        area: new FormControl('')                  
      });
  }

ngOnInit() {
this.dataService.obtenerAreas().subscribe(
      //result => console.log('success ', result),
      result => this.areas = result,
      error => console.log('error ', error)
    );

    this.iniciarFormulario();   
  }

onSubmit() {
    this.submitted = true;

    if (this.myForm.invalid) {
      alert ('Error')
      return      
    }
    this.dataService.RegistrarColaborador(this.myForm.value).subscribe(
                 result => console.log('success ', result),
                 error => console.log('error ', error)
             );    
  }

在html上：

<select class="area-select" (change)="onSelect($event)" formControlName="area">
          <option value="" disabled>Seleccionar Area</option>
          <option *ngFor="let area of areas" [ngValue]="area.id">{{area.nombre}}</option>
</select>       

标签： angulartypescriptformsselectinterface