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

问题描述

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

问题是Funcion字段没有显示值:

这是我的 html 代码的缩减部分:

<div class="campos"><!-- En Venta 这没关系--><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">否</mat-radio-button></mat-radio-group>

<!-- 活动这没关系--><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>

<!-- Pais 这没问题--><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><!-- 函数这不行--><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></表单>

这是 TS 代码:

ngOnInit(): void {this.getRegistros();}getRegistros() {this.http.get('http://localhost:7000/api/registros/' + this.service.getRow()).subscribe(data => {data.log = data.log.replace(/\\"/g, '"');console.log("formateo", JSON.parse(data.log));让转换 = JSON.parse(data.log);this.registros.controls.enVenta.setValue(convert.enVenta);//还行吧this.registros.controls.activo.setValue(convert.activo);//还行吧this.registros.controls.pais.setValue(convert.pais);//还行吧this.registros.controls.funcion.setValue(convert.funcion);//这不行});}

我尝试过的:我写了一个包含表单所有值的 console.log，表单的所有值都包括未显示的值.

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

您有什么建议吗?

谢谢.

解决方案

Angular 使用对象标识来选择选项.有可能为要更改的项目的身份，而数据不会更改.这个可以例如，如果项目是从 RPC 生产到服务器，然后重新运行该 RPC.即使数据没有改变，第二个响应将产生具有不同身份的对象.

为了克服这个问题，我们必须提供 compareFn 函数来使用 compareWith 输入进行 mat-select，该函数告诉 Angular 如何比较值.

试试这个:

component.html

 <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){返回 listOfItems &&选择项目 &&listOfItems.id === selectedItem.id;;}

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.

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

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>

And here is the TS code:

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

});
}

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.

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

Do you have any suggestions?

Thanks.

解决方案

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.

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.

Try this:

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

Here i am assuming your funciones object contains id property.

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

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