passing webapi value to select html in angular 2

Question

i have a typescript function that receives a json value from my webapi, and I need to pass this result to a select in html...

Service:

teste: teste[];
public getNomes(type: string, formGroup: FormGroup) {
    let params: HttpParams = undefined;
    params = new HttpParams().set('type', type);
    switch (type) {
        case "teste":
            params = params.set('cod', formGroup.controls['codigoCliente'].value);
            this.retornaNomeApi(API + '/Pesquisa/SelectPesquisa', params).subscribe(nome => {this.teste = nome.result});
    }
}

HTML:

 <select class="form-control" name="pedido">
        <option selected>Selecione...</option>
        <option *ngFor="let testes of teste">{{testes.cod}} - {{testes.nome}}</option>
      </select>

thanks in advance :D

Answer 1

I believe the best way to do that would be to create a reactive form. You could do it this way.

In HTML you could create the form with a formGroup this way.

<form [formGroup]="form">` 
     <select class="form-control" formGroupName="pedido">
        <option selected>Selecione...</option>
        <option *ngFor="let testes of teste">{{testes.cod}} 
          {{testes.nome}}</option>
   </select>
</form> 

In typescript you would need to inject the formBuilder dependency and create a Formgroup with the name set in the [formGroup] of Html.

constructor(private fb:FormBuilder){
}
form: FormGroup;

And add the instance of your form within the ngOnInit method().

ngOnInit(){
 this.form = this.fb.group({ 
    pedido: ''
 })
}

In receiving the data from your Webapi you could add the data to select as follows:

this.testes = res;

Take a look at the documentation of the reactive Forms https://angular.io/guide/reactive-forms