значение formControl не отображается в представлении

Question

У меня есть форма со многими полями, это было сделано с помощью formGroup и formControlName. Проблема в том, что когда я запускаю приложение, мне нужно получить данные из backEnd и отобразить их в представлении.

Проблема в том, что поле Funcion не отображает значение:

Вот сокращенная часть моего html кода:

<form #f="ngForm" [formGroup]="registros" class="fila-contenido">
                <div class="campos">
                    <!-- En Venta THIS IS OK-->
                    <label>¿En venta?</label>
                    <mat-radio-group formControlName="enVenta" aria-labelledby="example-radio-group-label"
                        class="example-radio-group">
                        <mat-radio-button value="1" class="example-radio-button">Si</mat-radio-button>
                        <mat-radio-button value="0" class="example-radio-button">No</mat-radio-button>
                    </mat-radio-group>
                </div>

                <!-- Activo THIS IS OK-->
                <div class="campos">
                    <label>¿Registrado?</label>
                    <mat-radio-group formControlName="activo" aria-labelledby="example-radio-group-label"
                        class="example-radio-group">
                        <mat-radio-button value="Si" class="example-radio-button">Si</mat-radio-button>
                        <mat-radio-button value="En Trámite" class="example-radio-button">En Trámite</mat-radio-button>
                        <mat-radio-button value="No Necesita" class="example-radio-button">No Necesita
                        </mat-radio-button>
                        <mat-radio-button value="No" class="example-radio-button">No</mat-radio-button>
                    </mat-radio-group>
                </div>

                <!-- Pais THIS IS OK-->
                <mat-form-field appearance="">
                    <mat-label>Pais</mat-label>
                    <mat-select formControlName="pais">
                        <mat-option *ngFor="let pais of selectedPaises" [value]="pais">{{pais}}</mat-option>
                    </mat-select>
                </mat-form-field>

                <!-- Funcion THIS IS NOT OK-->
                <mat-form-field appearance="">
                    <mat-label style=" font-weight: bold;">Función</mat-label>
                    <mat-select formControlName="funcion" required (selectionChange)=changeFuncion($event)>
                        <mat-option *ngFor="let funcion of funciones" [value]="funcion">{{funcion.Funcion}}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
</form>

А вот код TS:

ngOnInit(): void {

    this.getRegistros();


  }

getRegistros() {
    this.http.get<Registro>('http://localhost:7000/api/registros/' + this.service.getRow()).subscribe(data => {
      data.log = data.log.replace(/\\"/g, '"');
      console.log("formateo", JSON.parse(data.log));
      let convert = JSON.parse(data.log);

      this.registros.controls.enVenta.setValue(convert.enVenta); //this is OK
      this.registros.controls.activo.setValue(convert.activo); //this is OK
      this.registros.controls.pais.setValue(convert.pais); //this is OK
      this.registros.controls.funcion.setValue(convert.funcion); //this is not OK

});
}

Что я пробовал: я написал console.log со всеми значениями формы, в форме есть все значения, включая то, которое не отображается.

Я думаю, что это может быть связано с проблема ngOnInit. Но я пытался поставить getRegistros() на ngAfterViewInit, и у меня была такая же проблема :( Также я пытался использовать patchValue() вместо setValue(), но та же проблема

Есть ли у вас какие-либо предложения?

Спасибо.

Answer 1

Angular использует идентификатор объекта для выбора опции. Идентификационные данные элементов могут изменяться, а данные - нет. Это может произойти, например, если элементы производятся из RP C на сервер, и этот RP C запускается повторно. Даже если данные не изменились, второй ответ создаст объекты с разными идентификаторами.

Чтобы преодолеть эту проблему, мы должны предоставить функцию compareFn для выбора mat с использованием compareWith ввода, который сообщает Angular как сравнить значения.

Попробуйте следующее:

компонент. html

   <mat-form-field appearance="">
                <mat-label style=" font-weight: bold;">Función</mat-label>
                <mat-select formControlName="funcion" required (selectionChange)=changeFuncion($event) [compareWith]="compareWithFn">
                    <mat-option *ngFor="let funcion of funciones" [value]="funcion">{{funcion.Funcion}}
                    </mat-option>
                </mat-select>
            </mat-form-field>

component.ts

Здесь я предполагаю, что ваш объект funciones содержит свойство id.

compareWithFn(listOfItems,selectedItem){
     return listOfItems && selectedItem && listOfItems.id === selectedItem.id; ;
}

Answer 2

Думаю, проблема в вашем файле шаблона:

Обновленный шаблон:

<mat-form-field appearance="">
                    <mat-label style=" font-weight: bold;">Función</mat-label>
                    <mat-select formControlName="funcion" required (selectionChange)=changeFuncion(funcion) [(ngModel)]="funcion">
                        <mat-option *ngFor="let funcion of funciones" [value]="funcion">{{funcion.Funcion}}
                        </mat-option>
                    </mat-select>
                </mat-form-field>

Компонент:

funcion:any;