formControl 的值未显示在视图上

Question

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

问题是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

我认为问题出在您的模板文件中：

更新模板：

<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;

Answer 2

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

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

试试这个：

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 属性。

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