formControl的值未显示在视图上 [英] value of formControl not displayed on view

问题描述

我有一个包含许多字段的表单，它是由formGroup和formControlName制成的.问题是，当我启动应用程序时，我需要从后端获取数据并将其显示在视图上.

I have a form with many fields, It was made with formGroup and formControlName. The problem is when I start the app I need to get the data from the backEnd and display it on the view.

问题在于Funcion字段未显示该值:

The problem is that the field Funcion is not displaying the value:

这是我的html代码的简化部分:

Here is a reduced part of my html code:

<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，其中包含表单的所有值，该表单的所有值都包含一个未显示的值.

What I've tried: I've a write a console.log with all the values of the form, the form has all values included the one that is not displayed.

我认为这可能与ngOnInit问题有关.但是我试图将 getRegistros()放在 ngAfterViewInit 上，但我遇到了同样的问题:(我也尝试使用 patchValue()代替 setValue()，但存在相同的问题

I think it can be related to the ngOnInit problem. But I tried to put getRegistros() on ngAfterViewInit and I was having the same problem :( Also I tried to use patchValue() instead of setValue() but same problem

您有什么建议吗?

谢谢.

推荐答案

Angular使用对象标识来选择选项.对于数据不更改时要更改的项目的标识.这个可以例如，如果项目是从RPC生产到服务器，并且该RPC重新运行.即使数据没有改变，第二次反应将产生具有不同身份的物体.

Angular uses object identity to select option. It's possible for the identities of items to change while the data does not. This can happen, for example, if the items are produced from an RPC to the server, and that RPC is re-run. Even if the data hasn't changed, the second response will produce objects with different identities.

要解决此问题，我们必须提供compareFn函数，以使用compareWith输入进行垫选择，该输入告诉Angular如何比较值.

To overcome this issue we have to provide the compareFn function to mat-select using compareWith input that tells Angular how to compare the values.

尝试一下:

component.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属性.

Here i am assuming your funciones object contains id property.

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

这篇关于formControl的值未显示在视图上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！