Tengo datos con formato JSON que provienen del back-end, con el género como una etiqueta de selección en el front-end. No puedo preseleccionar la opción que viene con los datos json. También desde el back-end viene en formato enum y necesito analizarlo en consecuencia 1 para Male y 2 para Female aquí está el formato de mis datos de back-end,

{
  "salesPersonId": 13,
  "name": "testName",
  "gender": 1,
  "phone1": "34986215",
  "phone2": "string",
  "email": "testingEmail@example.com",
  "team": "Bravo",
  "teamLeader": "Delta",
  "countyId": 1,
  "county": null,
  "subCountyId": 1,
  "subCounty": null,
  "address": "House 108",
  "additionalInfo": "He Drinks tea",
  "input1": "string",
  "input2": "string"
}

Y esto es lo que estoy tratando de vincular con mis datos recibidos,

 <mat-form-field appearance="outline" fxFlex="33" class="pr-4">
    <mat-label>Gender</mat-label>
    <mat-select formControlName="gender">
        <mat-option value="1">1</mat-option>
        <mat-option value="2">2</mat-option>

    </mat-select>
</mat-form-field>

Ni produce ningún error ni preselecciona la etiqueta de género que proviene del back-end. Nota: Estoy usando formularios reactivos. Gracias de antemano.

4
Lint 18 nov. 2019 a las 11:07

1 respuesta

La mejor respuesta

Puede usar el método setValue en Angular Forms de la siguiente manera.

Asumiré que estás usando FormGroup. En HTML, value debe usarse como un enlace de propiedad de la siguiente manera.

<form [formGroup]="myGroup">
  <mat-form-field>
  <mat-label>Gender</mat-label>
  <mat-select formControlName="gender">
    <mat-option [value]="1">Male</mat-option>
    <mat-option [value]="2">Female</mat-option>
  </mat-select>
</mat-form-field>
</form>

Cambie su TS de la siguiente manera.

  user = { "name": "testName", "gender": 1 };

  ngOnInit() {
    this.myGroup.controls['gender'].setValue(this.user.gender);
  }

Demostración de StackBlitz

2
Ling Vu 18 nov. 2019 a las 08:40